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

原理：主要利用微信小程序强大的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、在页面中使用该组件

drawDataList=“{{dataList}}“>

二、参数配置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是文件类型， 这里为背景图，默认image

urlString''是网络图片地址

topNumber0否图像的左上角在可视区域上 Y 轴的位置, 单位px

leftNumber0否图像的左上角在可视区域上 X 轴的位置, 单位px

widthNumber750否画布的宽度, 单位px

heightNumber1334否画布的高度, 单位px

commentString'背景图'否图片描述

btnTextString'保存至相册'是生成按钮文字content -------绘制内容参数参数类型默认值必填说明typeString''是绘制的类型，可选image和text

shapeString'square'否绘制图片的形状, square 方形， circle 圆形

urlString''-图片的网络地址， type为image必填

contentString''-文本内容， type为text必填

topNumber0否图像的左上角在目标画布上 Y 轴的位置, 单位px

leftNUmber0否图像的左上角在目标画布上 X 轴的位置, 单位px

widthNumber100否绘制图片的宽度,单位px

heightNumber100否绘制图片的高度, 单位px

commentString''否绘制图片的说明

fontSizeNumber32否文本字体大小,单位px

lineHeightNumber32否文本行高, 单位px

colorString'#FFFFFF '否文本字体颜色

textAlignString'center'否文本水平对齐方式, 可选left, center, right

weightString'normal'否文本字体粗细

maxWidthNumber600否文本限制的最大宽度，单位px

四、备注

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

相关文章：