@meituai/alpha-mix

Tool for merging mask images and background images.

Demo

Online Demo

Install

npm i -S @meituai/alpha-mix

Usage

React/Vue usage

import AlphaMix from '@meituai/alpha-mix"';

VanillaJS usage

<script src="path/to/alpha-mix.min.js"></script>

Initialize

AlphaMix(originImgData, maskImgData, bgImgData), returns result ImageData.

• originImgData - ImageData - origin ImageData .
• maskImgData - ImageData - mask ImageData.
• bgImgData - ImageData - background ImageData.

For example:

var width = originImg.width
var height = originImg.height

// drawing origin image on canvas
var originCanvas = document.createElement('canvas')
var originCtx = originCanvas.getContext('2d')
originCanvas.width = width
originCanvas.height = height
originCtx.drawImage(originImg, 0, 0, width, height)

// drawing mask image on canvas
var maskCanvas = document.createElement('canvas')
var maskCtx = maskCanvas.getContext('2d')
maskCanvas.width = width
maskCanvas.height = height
maskCtx.drawImage(maskImg, 0, 0, width, height)

// drawing background image on canvas
var bgCanvas = document.createElement('canvas')
var bgCtx = bgCanvas.getContext('2d')
bgCanvas.width = width
bgCanvas.height = height
bgCtx.drawImage(bgImg, 0, 0, width, height)

// get ImageData
var originImgData = originCtx.getImageData(0, 0, width, height)
var maskImgData = maskCtx.getImageData(0, 0, width, height)
var bgImgData = bgCtx.getImageData(0, 0, width, height)

// 合并图片，返回最终Image Data
var resultImgData = AlphaMix(originImgData, maskImgData, bgImgData)

// ImageData to base64
var resCanvas = document.createElement('canvas')
var resCtx = resCanvas.getContext('2d')
resCanvas.width = width
resCanvas.height = height
resCtx.putImageData(resultImgData, 0, 0)

document.getElementById('resutSrc').src = resCanvas.toDataURL()