利用微信小程序中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、在页面中使用该组件

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

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

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

相关文章：

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

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

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

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！