微信小程序 擴(kuò)展組件·繪制canvas

wxml-to-canvas

小程序內(nèi)通過靜態(tài)模板和樣式繪制 canvas ，導(dǎo)出圖片，可用于生成分享圖等場景。

使用方法

Step1. npm 安裝

npm install --save wxml-to-canvas

Step2. JSON 組件聲明

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

Step3. wxml 引入組件

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

Step4. js 獲取實(shí)例

const {wxml, style} = require('./demo.js')
Page({
  data: {
    src: ''
  },
  onLoad() {
    this.widget = this.selectComponent('.widget')
  },
  renderToCanvas() {
    const p1 = this.widget.renderToCanvas({ wxml, style })
    p1.then((res) => {
      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
      })
    })
  }
})

wxml 模板

支持 view、text、image 三種標(biāo)簽，通過 class 匹配 style 對(duì)象中的樣式。

<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" rel="external nofollow" ></image>
  </view>
</view>

樣式

對(duì)象屬性值為對(duì)應(yīng) wxml 標(biāo)簽的 cass 駝峰形式。需為每個(gè)元素指定 width 和 height 屬性，否則會(huì)導(dǎo)致布局錯(cuò)誤。

存在多個(gè) className 時(shí)，位置靠后的優(yōu)先級(jí)更高，子元素會(huì)繼承父級(jí)元素的可繼承屬性。

元素均為 flex 布局。left/top 等 僅在 absolute 定位下生效。

const style = {
  container: {
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ccc',
    alignItems: 'center',
  },
  itemBox: {
    width: 80,
    height: 60,
  },
  red: {
    backgroundColor: '#ff0000'
  },
  green: {
    backgroundColor: '#00ff00'
  },
  blue: {
    backgroundColor: '#0000ff'
  },
  text: {
    width: 80,
    height: 60,
    textAlign: 'center',
    verticalAlign: 'middle',
  }
}

接口

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

渲染到 canvas，傳入 wxml 模板 和 style 對(duì)象，返回的容器對(duì)象包含布局和樣式信息。

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

提取畫布中容器所在區(qū)域內(nèi)容生成相同大小的圖片，返回臨時(shí)文件地址。

fileType 支持 jpg、png 兩種格式，quality 為圖片的質(zhì)量，目前僅對(duì) jpg 有效。取值范圍為 (0, 1]，不在范圍內(nèi)時(shí)當(dāng)作 1.0 處理。

支持的 css 屬性

布局相關(guān)

支持 marginLeft、paddingLeft 等

文字

lineHeight 可取帶 em 單位的字符串或數(shù)字類型。

變形