利用微信小程序中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)而来,实际情况可直接按设计稿上尺寸配置参数.

相关文章:

js与canvas合成图片做出微信公众号海报功能

微信小程序的多文件下载封装使用

以上就是利用微信小程序中Canvas API来合成海报生成组件封装的详细内容,更多请关注立业阁其它相关文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 利用微信小程序中Canvas API来合成海报生成组件封装 https://www.liyege.cn/lywxxcxzclhchbsczjfz.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章