Canvas API 在微信小程序中，海报生成组件封装之利用

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

原理：主要利用微信小程序强大的Canvas API来合成，生成后可用wx.canvasToTempFilePath()导出图片地址，从而可实现预览及保存至手机相册

一、如何使用

打开项目文件夹

2、在待使用页面json文件中注册该组件

3、在页面中使用该组件

二、参数配置三、参数说明        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来合成海报生成组件封装的详细内容