### [利用微信小程序中Canvas API来合成海报生成组件封装](https://www.prosaas.cn/article/17192)

**Published:** 2018-08-06T07:48:24

**Author:** 5201314

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

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

原理：主要利用微信小程序强大的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相关参数配置

| 参数  | 类型  | 默认值 | 必填  | 说明  |
| :---: | :---: | :---: | :---: | :---: |
| type | String | image | 是   | 文件类型， 这里为背景图，默认image |
| url | String | ''  | 是   | 网络图片地址 |
| top | Number | 0   | 否   | 图像的左上角在可视区域上 Y 轴的位置, 单位px |
| left | Number | 0   | 否   | 图像的左上角在可视区域上 X 轴的位置, 单位px |
| width | Number | 750 | 否   | 画布的宽度, 单位px |
| height | Number | 1334 | 否   | 画布的高度, 单位px |
| comment | String | '背景图' | 否   | 图片描述 |
| btnText | String | '保存至相册' | 是   | 生成按钮文字 |

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

| 参数  | 类型  | 默认值 | 必填  | 说明  |
| :---: | :---: | :---: | :---: | :---: |
| type | String | ''  | 是   | 绘制的类型，可选image和text |
| shape | String | 'square' | 否   | 绘制图片的形状, square 方形， circle 圆形 |
| url | String | ''  | \-  | 图片的网络地址， type为image必填 |
| content | String | ''  | \-  | 文本内容， type为text必填 |
| top | Number | 0   | 否   | 图像的左上角在目标画布上 Y 轴的位置, 单位px |
| left | NUmber | 0   | 否   | 图像的左上角在目标画布上 X 轴的位置, 单位px |
| width | Number | 100 | 否   | 绘制图片的宽度,单位px |
| height | Number | 100 | 否   | 绘制图片的高度, 单位px |
| comment | String | ''  | 否   | 绘制图片的说明 |
| fontSize | Number | 32  | 否   | 文本字体大小,单位px |
| lineHeight | Number | 32  | 否   | 文本行高, 单位px |
| color | String | '#FFFFFF ' | 否   | 文本字体颜色 |
| textAlign | String | 'center' | 否   | 文本水平对齐方式, 可选left, center, right |
| weight | String | 'normal' | 否   | 文本字体粗细 |
| maxWidth | Number | 600 | 否   | 文本限制的最大宽度，单位px |

#### 四、备注

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

相关文章：

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

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

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

**Categories:** 后端开发

---