0.2.1 • Published 5 years ago
chartlet v0.2.1
chartlet
:whale: 基于canvas实现的小巧的贴图工具
安装
npm i --save chartletCDN
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);
})