chartlet

🐳 基于canvas实现的小巧的贴图工具

安装

npm i --save chartlet

CDN

https://unpkg.com/chartlet/dist/chartlet.umd.js

基础示例

let cl = new Chartlet({
    backgroundImageURL: '../demo.jpg',
    items: [{
            top: 474,
            left: 1168,
            angle: 30,
            width: 569,
            height: 878,
            url: '../avatar.png'
        },
        {
            top: 1679,
            left: 1168,
            angle: 0,
            width: 569,
            height: 878,
            url: '../avatar.png'
        },
    ]
});
cl.on('loaded', () => {
    const dataURL = cl.toDataURL();
    console.log(dataURL);
})

API

constructor

构造函数参数:

名称	类型	默认值	说明
backgroundImageURL	String	-	背景图
items	Array	[]	贴图组

items展开

名称	类型	说明
top	Number	与canvas左上角y距离
left	Number	与canvas左上角x距离
angle	Number	每个贴图的旋转角度
width	Number	每个贴图的宽度
height	Number	每个贴图的高度
url	String	图片地址

set

修改设置, 参数同构造函数参数

on

监听方法, 比如监听图片是否加载完成

cl.on('loaded', ()=>{
    // 图片加载完成
    // 可以开始获取效果图的dataURL
})

toDataURL

生成base64

参数名称	类型	默认值	说明
type	String	image/png	图片类型
encoderOptions	Number	0.92	压缩比
width	Number	背景图的宽度	生成图片的宽度
height	Number	背景图的高度	生成图片的高度

cl.on('loaded', ()=>{
    const dataURL = cl.toDataURL();
    console.log(dataURL);
})

getRate

获取canvas的宽/高比

cl.on('loaded', ()=>{
    const dataURL = cl.toDataURL({
        width: 100,
        height: 100 / cl.getRate()
    });
    console.log(dataURL);
})