[防城港seo外包公司]利用微信小程序中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: '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 -------绘制内容参数

四、27 2020.10 [铁岭seo公司都选久澳]关于微信小程序 modal弹框组件的介绍 这篇文章主要介绍了微信小程序 modal弹框组件详解的相关资料●◇●,并附简单实例,需要的朋友可以参考下 微信小程序 modal▪◆◇▼： 这里对微信小程序中 modal组件进行详细解析◆○，，备注

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

相关文章：

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

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

　　以上就是利用微信小程序中Canvas API来合成海报生成组件封装的详细内容◇=，更多请关注久澳传媒编程栏目其它相关文章！