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

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

原理：主要利用微信小程序强大的Canvas API来合成，生成后可用wx.canvasToTempFilePath()导出图片地址，从而可实现预览及保存至手机相册一、如何使用打开项目文件夹1、 gitclonehttps://github.com/WGinit/mini-poster.git2、在待使用页面Json文件中注册该组件{ “usingComponents“:{ “share-image“: “/components/share_image/share_image“ }}3、在页面中使用该组件<share imagedrawDataList=“{{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}]}三、参数说明参数类型默认值必填说明typeStringimage是文件类型， 这里为背景图，默认imageurlString''是网络图片地址topNumber0否图像的左上角在可视区域上 Y 轴的位置, 单位pxleftNumber0否图像的左上角在可视区域上 X 轴的位置, 单位pxwidthNumber750否画布的宽度, 单位pxheightNumber1334否画布的高度, 单位pxcommentString'背景图'否图片描述btnTextString'保存至相册'是生成按钮文字参数类型默认值必填说明typeString''是绘制的类型，可选image和textshapeString'square'否绘制图片的形状, square 方形， circle 圆形urlString''-图片的网络地址， type为image必填contentString''-文本内容， type为text必填topNumber0否图像的左上角在目标画布上 Y 轴的位置, 单位pxleftNUmber0否图像的左上角在目标画布上 X 轴的位置, 单位pxwidthNumber100否绘制图片的宽度,单位pxheightNumber100否绘制图片的高度, 单位pxcommentString''否绘制图片的说明fontSizeNumber32否文本字体大小,单位pxlineHeightNumber32否文本行高, 单位pxcolorString'#FFFFFF '否文本字体颜色textAlignString'center'否文本水平对齐方式, 可选left, center, rightweightString'normal'否文本字体粗细maxWidthNumber600否文本限制的最大宽度，单位px四、备注上述单位都是参照设计稿（750 * 1334）而来，实际情况可直接按设计稿上尺寸配置参数.

相关文章：

js与canvas合成图片做出微信公众号海报功能

微信小程序的多文件下载封装使用以上就是利用微信小程序中Canvas API来合成海报生成组件封装的详细内容，更多请关注小潘博客其它相关文章！