快速图片合成插件--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);
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。