摘要：每个小程序成型后，一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。
每个小程序成型后，一般都会选择生成带菊花码的海报分享出去来吸引更多的流量。下面来介绍下他的一种实现方式吧
组件Github地址: https://github.com/WGinit/min...
原理：主要利用微信小程序强大的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: "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）而来，实际情况可直接按设计稿上尺寸配置参数.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96614.html
