E企盈营销工具技术服务商 热线:4006-838-530

微信小程序海报生成组件封装

E企盈直播平台营销卖货系统

每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。下面来介绍下他的一种实现方式吧组件Github地址: https://github.com/WGinit/min…原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToTempFilePath()导出图片地址,从而可实现预览及保存至手机相册一、如何使用打开项目文件夹   1、 git  clone  https://github.com/WGinit/mini-poster.git2、在待使用页面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相关参数配置参数类型默认值必填说明typeStringimage是文件类型, 这里为背景图,默认imageurlString”是网络图片地址topNumber0否图像的左上角在可视区域上 Y 轴的位置, 单位pxleftNumber0否图像的左上角在可视区域上 X 轴的位置, 单位pxwidthNumber750否画布的宽度, 单位pxheightNumber1334否画布的高度, 单位pxcommentString’背景图’否图片描述btnTextString’保存至相册’是生成按钮文字content ——-绘制内容参数参数类型默认值必填说明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)而来,实际情况可直接按设计稿上尺寸配置参数.

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序海报生成组件封装
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏