怎么利用微信小程序中CanvasAPI来合成海报生成组件封装-创新互联
这篇文章主要介绍怎么利用微信小程序中Canvas API来合成海报生成组件封装,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司是专业的市中网站建设公司,市中接单;提供成都网站设计、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行市中网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!原理:主要利用微信小程序强大的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)而来,实际情况可直接按设计稿上尺寸配置参数.
以上是“怎么利用微信小程序中Canvas API来合成海报生成组件封装”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
本文名称:怎么利用微信小程序中CanvasAPI来合成海报生成组件封装-创新互联
网站网址:http://myzitong.com/article/hhhgs.html