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

快速图片合成插件--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);
});
作者:郭东东原文地址:https://segmentfault.com/a/1190000010525331

%s 个评论

要回复文章请先登录注册