Component of generate share image by Canvas
注: canvas画图不需要适配机型,适配设计稿,所使用的单位都是px,此组件在绘画过程中严格按照设计图标注进行赋值,为了保证导出图片的清晰度,尽可能使用2倍稿或3倍稿,一份配置文件对应一个分享图片,配置options部分为预处理物料,setExtraData(options)为填充动态数据,调用draw()开始绘制,返回Promise
使用方法
import Canvas from 'miniprogram-canvas'
let canvas = new Canvas(this, {
// 画布的ID
canvasId: 'canvas',
// 是否使用图片做背景,如果为true 则传入的imgArr的最后一张为背景图片,如果使用图片做北京,则canvas的宽高为图片的宽高
useBgImage: false,
// 画布的宽度 缺省 750 (单位: px) 如果useBgImage为true,此属性值无效
width: 750,
// 画布的高度 缺省 1334 (单位: px) 如果useBgImage为true,此属性值无效
height: 1334,
// 绘制超时时间
timeout: 10000,
// 是否使用预览
preview: true,
// 导出图片的格式
fileType: 'jpg',
// 需要绘制的图片元素
imgArr: [
{drawType: 'image',url:'http://image.png',x: 40, y: 1076, zIndex: 31, height: 150, width:150},
{drawType: 'image',url:'http://image.jpg',x: 35, y: 482, width: 680, height: 451, zIndex: 31},
],
// 需要绘制的文本元素
textArr: [
{drawType: 'text', text: '感谢', color: '#888889', x: 60, y: 180, zIndex: 33, fontSize: 28,textAlign: 'left'},
// 如果文本行内需要填充动态数据, 则填充部分使用 ‘${10}$’ 替代, 数字则为需要填充的文字个数, 长度可能不是很准确,根据应用场景定义
{drawType: 'text', text: '第${10}$位', color: '#888889', x: 60, y: 240, zIndex: 33, fontSize: 28,textAlign: 'left'},
{drawType: 'text', text: '为《${18}$》捐献爱心的人士', color: '#888889', x: 60, y: 290, zIndex: 33, fontSize: 28,textAlign: 'left'},
{drawType: 'text', text: '长按或扫描二维码', color: '#666', x: 210, y: 1100, zIndex: 34, fontSize: 30, textAlign: 'left'},
],
// 需要绘制的矩形的元素
rectArr: [
{drawType: 'rect',x: 10, y: 10, width: 730, height: 1314, color: '#303135', bgColor: '#FFF', zIndex: 0, radius: 20},
{drawType: 'rect',x: 10, y: 10, width: 730, height: 1000, color: '#303135', bgColor: '#303135', zIndex: 1, trr: 20, trr: 20},
],
})
入参options 为预处理物料,即所需要绘制的静态内容,所需要绘制的动态数据可以通过 “setExtraData”函数进行添加绘制
Page({
onLoad() {
this.canvas = new Canvas(this,options)
},
createImage() {
// 所需要绘制的动态数据
this.canvas.setExtraData([
{drawType: 'text', text: "测试", color: '#fff', x: 140, y: 180, zIndex: 33, fontSize: 28,textAlign: 'left'},
{drawType: 'text', text: '动态数据', color: '#b78f53', x: 410, y: 240, zIndex: 33, fontSize: 28,textAlign: 'left'},
{drawType: 'text', text: '绘制动态数据', color: '#888889', x: 120, y: 290, zIndex: 33, fontSize: 28,textAlign: 'left'},
{drawType: 'text', text: '1.99', color: 'red', x: 265, y: 1162, zIndex: 34, fontSize: 26, textAlign: 'left'},
{drawType: 'image',url: "http://image.png",x: 106, y: 112, avatar: true, radius: 50,zIndex: 31},
])
// 调用draw函数开始绘制
this.canvas.draw().then(function(res) {
console.log('res', res)
})
}
})
目前受小程序的限制,还不能动态的创建添加标签,所以需要相应的wxml页面添加以下代码
<!--canvas-id是自己定义的,此处canvas-id是什么,option配置文件 canvasId 就是什么-->
<canvas canvas-id="canvas" style="height: {{canvasHeight}}px; width: {{canvasWidth}}px;position: absolute;left: -100000px"></canvas>
元素共有属性
属性 | 元素 | 值 | 值类型 | 必填 | 备注 |
---|
drawType | image、text、rect | 'image'、'text'、'rect' | String | 是 | 渲染起始x坐标 |
x | image、text、rect | 缺省值为0 | Number | 是 | 渲染起始x坐标 |
y | image、text、rect | 缺省值为0 | Number | 是 | 渲染起始y坐标 |
height | image、text、rect | 缺省值为元素高度 | Number | 是 | 渲染元素的高度 |
width | image、text、rect | 缺省值为元素宽度 | Number | 是 | 渲染元素的宽度 |
zIndex | image、text、rect | 0 | Number | 否 | 渲染元素的层级,值越大层级越高 |
元素私有属性
image
属性 | 默认值 | 值类型 | 必填 | 备注 |
---|
url | ----- | String | 是 | 图片地址 |
avatar | ----- | String | 否 | 所画元素是否是头像圆角头像 |
borderColor | ----- | String | 否 | 所画头像边框的颜色:只有在avatar为true时生效 |
borderWidth | ----- | Number | 否 | 所画头像边框的宽度:只有在avatar为true时生效 |
radius | ----- | Number | 否 | 所画头像的半径:只有在avatar为true时生效 |
rect
属性 | 默认值 | 值类型 | 必填 | 备注 |
---|
radius | 0 | Number | 是 | 圆角半径 |
topLeftRadius | 0 | Number | 否 | 矩形左上角圆角半径, radius存在时此值无效 |
topRightRadius | 0 | Number | 否 | 矩形右上角圆角半径, radius存在时此值无效 |
bottomLeftRadius | 0 | Number | 否 | 矩形左下角圆角半径, radius存在时此值无效 |
bottomRightRadius | 0 | Number | 否 | 矩形右下角圆角半径, radius存在时此值无效 |
borderColor | ----- | String | 否 | 边框的颜色 |
backgroundColor | ----- | Number | 否 | 填充的颜色 |
text
属性 | 默认值 | 值类型 | 必填 | 备注 |
---|
text | ----- | String | 是 | 要填充的文字 |
color | #000 | String | 否 | 字体的颜色 |
fontSize | 20 | Number | 否 | 字体大小 |
textAlign | 'center' | String | 否 | 字体对其方式 |
lineHeight | 10 | String | 否 | 行间距 |
padding | 0 | String | 否 | 文字距离画布两边的内边距 |
paddingLeft | 0 | String | 否 | 文字距离画布左边的内边距,设置padding后此值无效 |
padding | 0 | String | 否 | 文字距离画布两边的内边距,设置padding后此值无效 |