这篇文章主要介绍怎么利用微信小程序中Canvas API来合成海报生成组件封装，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
原理：主要利用微信小程序强大的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）而来，实际情况可直接按设计稿上尺寸配置参数.
以上是“怎么利用微信小程序中Canvas API来合成海报生成组件封装”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
