利用微信小程序中Canvas API来合成海报生成组件封装

Posted 2020-12-07 香喷喷的小烤鸡

每个小程序成型后，一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。下面来介绍下其他的一种实现方式吧

 

原理：主要利用微信小程序强大的Canvas API来合成，生成后可用wx.canvasToTempFilePath()导出图片地址，从而可实现预览及保存至手机相册

一、如何使用

打开项目文件夹

1	1、 git  clone  https://github.com/WGinit/mini-poster.git

2、在待使用页面Json文件中注册该组件

1 2 3 4 5

{ “usingComponents“:     { “share-image“: “/components/share_image/share_image“ }   }

3、在页面中使用该组件

1 2 3 4 5

<share–image        drawDataList=“{{dataList}}“>   </share–image>

二、参数配置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

dataList: {     canvasData:{       type: ‘image‘,       url: ‘‘,       top: 0,       left: 0,       width: 750,       height: 1334,       comment: ‘背景图‘,       btnText: ‘保存至相册‘     },     content: [{       type: ‘image‘,       url: ‘‘,       top: 136,       left: 100,       shape: ‘square‘,       width: 290,       height: 186,       comment: ‘头像‘     }, {       type: ‘text‘,       content: ‘白山羊‘,       top: 336,       left: 100,       fontSize: 40,       lineHeight: 40,       color: ‘#f00‘,       textAlign: ‘left‘,       weight: ‘bold‘,       maxWidth: 287     }]   }

三、参数说明

canvasData------------canvas相关参数配置

参数	类型	默认值	必填	说明
type	String	image	是	文件类型， 这里为背景图，默认image
url	String	‘‘	是	网络图片地址
top	Number	0	否	图像的左上角在可视区域上 Y 轴的位置, 单位px
left	Number	0	否	图像的左上角在可视区域上 X 轴的位置, 单位px
width	Number	750	否	画布的宽度, 单位px
height	Number	1334	否	画布的高度, 单位px
comment	String	‘背景图‘	否	图片描述
btnText	String	‘保存至相册‘	是	生成按钮文字

content -------绘制内容参数

参数	类型	默认值	必填	说明
type	String	‘‘	是	绘制的类型，可选image和text
shape	String	‘square‘	否	绘制图片的形状, square 方形， circle 圆形
url	String	‘‘	-	图片的网络地址， type为image必填
content	String	‘‘	-	文本内容， type为text必填
top	Number	0	否	图像的左上角在目标画布上 Y 轴的位置, 单位px
left	NUmber	0	否	图像的左上角在目标画布上 X 轴的位置, 单位px
width	Number	100	否	绘制图片的宽度,单位px
height	Number	100	否	绘制图片的高度, 单位px
comment	String	‘‘	否	绘制图片的说明
fontSize	Number	32	否	文本字体大小,单位px
lineHeight	Number	32	否	文本行高, 单位px
color	String	‘#FFFFFF ‘	否	文本字体颜色
textAlign	String	‘center‘	否	文本水平对齐方式, 可选left, center, right
weight	String	‘normal‘	否	文本字体粗细
maxWidth	Number	600	否	文本限制的最大宽度，单位px

四、备注

上述单位都是参照设计稿（750 * 1334）而来，实际情况可直接按设计稿上尺寸配置参数