wxml-to-canvas

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

使用方法

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

  1. npm install --save wxml-to-canvas

Step2. JSON 组件声明

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

Step3. wxml 引入组件

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

Step4. js 获取实例

  1. const {wxml, style} = require('./demo.js')
  2. Page({
  3. data: {
  4. src: ''
  5. },
  6. onLoad() {
  7. this.widget = this.selectComponent('.widget')
  8. },
  9. renderToCanvas() {
  10. const p1 = this.widget.renderToCanvas({ wxml, style })
  11. p1.then((res) => {
  12. this.container = res
  13. this.extraImage()
  14. })
  15. },
  16. extraImage() {
  17. const p2 = this.widget.canvasToTempFilePath()
  18. p2.then(res => {
  19. this.setData({
  20. src: res.tempFilePath,
  21. width: this.container.layoutBox.width,
  22. height: this.container.layoutBox.height
  23. })
  24. })
  25. }
  26. })

wxml 模板

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

  1. <view class="container" >
  2. <view class="item-box red">
  3. </view>
  4. <view class="item-box green" >
  5. <text class="text">yeah!</text>
  6. </view>
  7. <view class="item-box blue">
  8. <image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image>
  9. </view>
  10. </view>

样式

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

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

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

  1. const style = {
  2. container: {
  3. width: 300,
  4. height: 200,
  5. flexDirection: 'row',
  6. justifyContent: 'space-around',
  7. backgroundColor: '#ccc',
  8. alignItems: 'center',
  9. },
  10. itemBox: {
  11. width: 80,
  12. height: 60,
  13. },
  14. red: {
  15. backgroundColor: '#ff0000'
  16. },
  17. green: {
  18. backgroundColor: '#00ff00'
  19. },
  20. blue: {
  21. backgroundColor: '#0000ff'
  22. },
  23. text: {
  24. width: 80,
  25. height: 60,
  26. textAlign: 'center',
  27. verticalAlign: 'middle',
  28. }
  29. }

接口

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

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

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

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

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

支持的 css 属性

布局相关

属性名支持的值或类型默认值
widthnumber0
heightnumber0
positionrelative, absoluterelative
leftnumber0
topnumber0
rightnumber0
bottomnumber0
marginnumber0
paddingnumber0
borderWidthnumber0
borderRadiusnumber0
flexDirectioncolumn, rowrow
flexShrinknumber1
flexGrownumber
flexWrapwrap, nowrapnowrap
justifyContentflex-start, center, flex-end, space-between, space-aroundflex-start
alignItems, alignSelfflex-start, center, flex-end, stretchflex-start

支持 marginLeft、paddingLeft 等

文字

属性名支持的值或类型默认值
fontSizenumber14
lineHeightnumber / string‘1.4em’
textAlignleft, center, rightleft
verticalAligntop, middle, bottomtop
colorstring#000000
backgroundColorstringtransparent

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

变形

属性名支持的值或类型默认值
scalenumber1