open-index/open-npm huggingface dataset:
npm package: @meituai/alpha-mix
Description: Tool for merging mask images and background images.
Author: MTlab
Latest version: 0.1.5

# @meituai/alpha-mix

Tool for merging mask images and background images.

## Demo

[Online Demo](https://h5-beta.mr.meitu.com/2019/mask_demo/)

![demo](https://oss.mtlab.meitu.com/public/_aFWIDzg2FmhSBQA8x0S3uoMgpGxwPWA/MTU2NTkzNTIwMA==/f33c3434-1f58-449c-616c-3982293cd2aa.jpg)

## Install

```bash
npm i -S @meituai/alpha-mix
```

## Usage

### React/Vue usage

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

### VanillaJS usage

```html
<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:

```js
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()
```