@meituai/alpha-mix
Tool for merging mask images and background images.
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()