wxml-to-canvas-enhanced

在 wxml-to-canvas 的基础上新增了部分功能。如有新需求可在 issues 提出。

更新日志

Changelog

1. 新增 androidDprTo2 属性
2. 画文本的时候，会自动计算宽度，超出部分转换成...（支持单行和多行）
3. 支持即时渲染画布
4. 支持动态宽高
5. 图片支持 mode 属性(aspectFit, aspectFill)
6. 新增 text，image，view 的 shadow css 属性，当在 image 上使用时，需要传递 clip 属性为 false，否则会裁剪图片
7. 新增 ellipsis, shadow 的 demo
8. 修复text英文单词换行折断问题

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

使用方法

Step1. npm 安装，参考 小程序 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>

属性列表

| 属性 | 类型 | 默认值 | 必填 | 说明 | | ------------- | ------- | ------ | ---- | -------------------------------------------------------- | | width | Number | 400 | 否 | 画布宽度 | | height | Number | 300 | 否 | 画布高度 | | androidDprTo2 | Boolean | false | 否 | 在安卓机 dpr 大于 2 的时候，是否还是按照 dpr 为 2 来渲染 |

Step4. js 获取实例

const {wxml, style} = require('./demo.js')
Page({
  data: {
    src: ''
  },
  onLoad() {
    this.widget = this.selectComponent('.widget')
    // 支持即使渲染画布
    // this.widget.renderToCanvas({ wxml, style })
  },
  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 三种标签，通过 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>

样式

对象属性值为对应 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',
  }
}

接口

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

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

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

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

fileType 支持 jpg、png 两种格式，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 |

阴影

| 属性名 | 支持的值或类型 | 默认值 | | ------ | ------------------------------ | ------ | | shadow | 'h-shadow v-shadow blur color' | |

阴影类型详见mdn, 当在 image 上使用时，需要传递 clip 属性为 false，否则会裁剪图片

组件属性

Image

| 属性名 | 支持的值或类型 | 默认值 | 描述 | | ------ | -------------- | ------ | ------------ | | clip | boolean | true | 是否裁剪图片 |