Noodles, Poodles and More!

    @meituai/alpha-mix

    0.1.5 • Public • Published

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

    Keywords

    Install

    npm i @meituai/alpha-mix

    DownloadsWeekly Downloads

    1

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    864 kB

    Total Files

    15

    Last publish

    Collaborators

    • mtlab