widget-to-canvas v1.0.3

widget-to-canvas

小程序内通过静态模板和样式绘制 canvas ，导出图片（基础库版本 >= 2.9.0）。

使用方法

Step1. npm 安装，参考 小程序 npm 支持

npm install --save widget-to-canvas

Step2. JSON 组件声明

{
  "usingComponents": {
    "widget-to-canvas": "widget-to-canvas",
  }
}

Step3. wxml 引入弹幕组件

<video class="video" src="{{src}}">
  <widget-to-canvas class="widget"></widget-to-canvas>
</video>
<image src="{{src}}" style="width: {{width}}px; height: {{height}}px"></image>

Step4. js 获取实例

const {dom, style} = require('./demo.js')
Page({
  data: {
    src: ''
  },
  onLoad() {
    this.widget = this.selectComponent('.widget')
  },
  renderToCanvas() {
    const p1 = this.widget.renderToCanvas({ dom, style })
    p1.then((res) => {
      console.log('container', res.layoutBox)
      this.container = res
      this.extraImage()
    })
  },
  extraImage() {
    const p2 = this.widget.canvasToTempFilePath()
    p2.then(res => {
      this.setData({
        src: res.tempFilePath,
        width: this.container.layoutBox.width,
        height: this.container.layoutBox.height
      })
    })
  }
})

模板

支持 view、text、image 三种标签，通过 class 匹配 style 对象中的样式。 class 不支持并列，取唯一值。

<view class="container">
  <view class="item-box-red">
  </view>
  <view class="item-box-green">
    <text class="text">yeah!</text>
  </view>
  <view class="item-box-blue">
      <image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image>
  </view>
</view>

样式

对象属性值为对应标签的 class 驼峰形式。需为每个标签元素指定 width 和 height 属性，否则会导致布局错误。样式暂不支持继承。

元素均为 flex 布局。left/top 仅在 absolute 定位下生效。

const style = {
  container: {
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ccc',
    alignItems: 'center'
  },
  itemBoxRed: {
    width: 80,
    height: 60,
    backgroundColor: '#ff0000'
  },
}

接口

f1. renderToCanvas({dom, style}): Promise

渲染结构到 canvas，传入template 和 style 对象，返回容器对象，包含布局和样式信息。

f2. canvasToTempFilePath({fileType, quality}): Promise

提取画布中容器所在区域内容生成相同大小的图片，返回临时文件地址。

fileType 支持 jpg、png 两种格式，quality 为图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。

支持的 css 属性

布局相关

支持 marginLeft, marginRight, marginTop, marginBottom, paddingLeft, paddingRight, paddingTop, paddingBottom

文字

lineHeight 取值为数字时，表示fontSize的倍数；可带单位如 '20px’。

变形