前端图片合成技术_让前端也能快速地合成图片！

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

在业务中，经常遇到各种合成图片的需求，如贴纸的合成，添加文字注释，添加水印等，因为这些业务经常需要进行各种位置，状态等参数的计算，写起来并不是那么方便。该插件就是为了解决这部分难点，封装底层 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('郭晓东啊啊啊',{

width:'300px',

align:'center',

pos:{

x:0,

y:0,

},

})

// watermark 添加水印函数，基于 add 函数封装；

.watermark(img ,{

width:'40%',

pos:'rightBottom',

})

// draw 最终绘制函数，用于最终的绘制；

.draw( b64 =>{

console.log(b64);

});