每个小程序成型后，一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。下面来介绍下其他的一种实现方式吧
原理：主要利用微信小程序强大的Canvas API来合成，生成后可用wx.canvasToTempFilePath()导出图片地址，从而可实现预览及保存至手机相册
一、如何使用
打开项目文件夹1、 git clone /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)而来，实际情况可直接按设计稿上尺寸配置参数.
相关文章：
