8

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

郭东东
2.9k 声望1.5k 粉丝