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

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

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

原理：主要利用微信小程序强大的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、在页面中使用该组件

-

二、参数配置

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相关参数配置

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

四、备注

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

相关文章：

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

微信小程序的多文件-封装使用

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。