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

原理：主要利用微信小程序强大的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: &＃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
    }]
  }

三、参数说明

canvasData------------canvas相关参数配置

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

四、备注

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

相关文章：

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

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

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