微信小顺序海报天生组件封装

2019年8月22日 118次阅读 来源: 白山羊_Wginit

每一个小顺序成型后，平常都邑挑选天生带菊花码的海报分享出去来吸收更多的流量。下面来引见下他的一种完成体式格局吧

组件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、在页面中运用该组件

  <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）而来，实际情况可直接按设想稿上尺寸设置参数.

    原文作者：白山羊_Wginit
    原文地址: https://segmentfault.com/a/1190000015899256
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞