chartlet

:whale: 基于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);
})