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

快速图片合成插件--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);
});