怎么利用微信小程序中CanvasAPI来合成海报生成组件封装

这篇文章主要介绍怎么利用微信小程序中Canvas API来合成海报生成组件封装,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司成都企业网站建设服务,提供成都网站设计、网站制作、外贸营销网站建设网站开发,网站定制,建网站,网站搭建,网站设计,成都响应式网站建设公司,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:18982081108

原理:主要利用微信小程序强大的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相关参数配置
参数类型默认值必填说明
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)而来,实际情况可直接按设计稿上尺寸配置参数.

以上是“怎么利用微信小程序中Canvas API来合成海报生成组件封装”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!

网页标题:怎么利用微信小程序中CanvasAPI来合成海报生成组件封装
文章起源:https://www.cdcxhl.com/article26/pdgpcg.html

成都网站建设公司_创新互联,为您提供关键词优化全网营销推广服务器托管自适应网站网站排名外贸建站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都app开发公司