小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景。代码片段
Step1. npm 安装,参考 小程序 npm 支持
npm install --save wxml-to-canvas
{
"usingComponents": {
"wxml-to-canvas": "wxml-to-canvas",
}
}
<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 | 否 | 画布高度 |
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
})
})
}
})
支持 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',
}
}
渲染到 canvas,传入 wxml 模板 和 style 对象,返回的容器对象包含布局和样式信息。
提取画布中容器所在区域内容生成相同大小的图片,返回临时文件地址。
fileType
支持 jpg
、png
两种格式,quality 为图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。
属性名 | 支持的值或类型 | 默认值 |
---|---|---|
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 |