# wxml-to-canvas

(opens new window) (opens new window)

小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景。代码片段 (opens new window)

# 使用方法

# Step1. npm 安装,参考 小程序 npm 支持 (opens new window)

npm install --save wxml-to-canvas
1

# Step2. JSON 组件声明

{
  "usingComponents": {
    "wxml-to-canvas": "wxml-to-canvas",
  }
}
1
2
3
4
5

# 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>
1
2
3
4
# 属性列表
属性 类型 默认值 必填 说明
width Number 400 画布宽度
height Number 300 画布高度

# Step4. js 获取实例

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
      })
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# wxml 模板

支持 viewtextimage 三种标签,通过 class 匹配 style 对象中的样式。

<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>
1
2
3
4
5
6
7
8
9
10

# 样式

对象属性值为对应 wxml 标签的 cass 驼峰形式。需为每个元素指定 width 和 height 属性,否则会导致布局错误。

存在多个 className 时,位置靠后的优先级更高,子元素会继承父级元素的可继承属性。

元素均为 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',
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 接口

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

渲染到 canvas,传入 wxml 模板 和 style 对象,返回的容器对象包含布局和样式信息。

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

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

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

# 支持的 css 属性

# 布局相关

属性名 支持的值或类型 默认值
width number 0
height number 0
position relative, absolute relative
left number 0
top number 0
right number 0
bottom number 0
margin number 0
padding number 0
borderWidth number 0
borderRadius number 0
flexDirection column, row row
flexShrink number 1
flexGrow number
flexWrap wrap, nowrap nowrap
justifyContent flex-start, center, flex-end, space-between, space-around flex-start
alignItems, alignSelf flex-start, center, flex-end, stretch flex-start

支持 marginLeft、paddingLeft 等

# 文字

属性名 支持的值或类型 默认值
fontSize number 14
lineHeight number / string '1.4em'
textAlign left, center, right left
verticalAlign top, middle, bottom top
color string #000000
backgroundColor string transparent

lineHeight 可取带 em 单位的字符串或数字类型。

# 变形

属性名 支持的值或类型 默认值
scale number 1