am
@meituai/alpha-mix
npm i @meituai/alpha-mix
am

@meituai/alpha-mix

A lightweight tree widget, compatible with VanillaJS / React / Vue. Tiny size after gzip. Zero dependence.

by Metadavid

0.1.5 (see all)License:MITTypeScript:Not Found
npm i @meituai/alpha-mix
Readme

@meituai/alpha-mix

Tool for merging mask images and background images.

Demo

Online Demo

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

Downloads/wk

21

GitHub Stars

68

LAST COMMIT

10mos ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

6

OPEN PRs

10
VersionTagPublished
0.1.5
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate