原理：主要利用微信小程序强大的canvas api来合成，生成后可用wx.canvastotempfilepath()导出图片地址，从而可实现预览及保存至手机相册
一、如何使用打开项目文件夹
1、 git clone https://github.com/wginit/mini-poster.git
2、在待使用页面json文件中注册该组件
{ “usingcomponents“: { “share-image“: “/components/share_image/share_image“ }}
3、在页面中使用该组件
<share–image drawdatalist=“{{datalist}}“> </share–image>
二、参数配置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）而来，实际情况可直接按设计稿上尺寸配置参数.
相关文章：
js与canvas合成图片做出微信公众号海报功能
微信小程序的多文件下载封装使用
以上就是利用微信小程序中canvas api来合成海报生成组件封装的详细内容。