讓前端也能快速地合成圖片！

快速圖片合成插件--mcanvas.js

demo

詳細文檔

github

在業務中，常常遇到各類合成圖片的需求，如貼紙的合成，添加文字註釋，添加水印等，由於這些業務常常須要進行各類位置，狀態等參數的計算，寫起來並非那麼方便。該插件就是爲了解決這部分難點，封裝底層 API 及各類計算，提供出使用更爲簡單的 API，減小項目上的重複工做，提升效率；

但願你們喜歡，有什麼問題及時提issue與我探討哈。~~

使用方式：

// 建立畫布，初始化 canvas；
let mc = new MC({
    width: 1000,
    height: 1000,
    backgroundColor: 'black',
});

// background : 準備底圖；提供多種模式
mc.background('imageUrl',{
    left:0,
    top:0,
    color:'#000000',
    type:'origin',
})

// add 添加圖片素材基礎函數；
.add('images/nose.png',{
    width:183,
    pos:{
        x:250,
        y:369,
        scale:0.84,
        rotate:1,
    },
})

// text 添加文字數據基礎函數；
.text('郭曉東<br><s>啊啊啊</s>',{
    width:'300px',
    align:'center',
    pos:{
        x:0,
        y:0,
      },
})

// watermark 添加水印函數，基於 add 函數封裝；
.watermark(img ,{
    width:'40%',
    pos:'rightBottom',
})

// draw 最終繪製函數，用於最終的繪製；
.draw( b64 =>{
     console.log(b64);
});