## wxml-to-canvas
`
//画canvas
renderToCanvas() {
let $this = this
let card = $this.data.card
let wxml = `
<view class="cardimg">
<image class="img" src="` + baseUrl + `image-card.png" mode="widthFix"></image>
<view class="cardmsg">
<text class="text"> 有效领取日期：` + this.data.time + `</text>
<text class="text"> 预约门店：` + this.data.store + `</text>
<text class="text"> 门店地址：` + this.data.address + `</text>
<text class="text"> 联系电话：` + this.data.phone + `</text>
</view>
</view>
`
let style = {
cardimg: {
width: card.w,
height: card.h,
},
img: {
width: card.w,
height: card.h,
},
cardmsg: {
fontSize: card.fs,
color: "#fff",
lineHeight: card.lh,
position: 'absolute',
top: card.y,
left: card.x,
},
text: {
width: card.textw,
lineHeight: card.lh,
height:card.lh,
fontSize: card.fs,
textAlign: 'left',
verticalAlign: 'middle',
color: '#fff',
},
}
console.log(this.widget)
// 渲染到 canvas，传入 wxml 模板 和 style 对象，返回的容器对象包含布局和样式信息。
const p1 = this.widget.renderToCanvas({
wxml,
style
})
p1.then((res) => {
$this.container = res
})
wx.hideLoading({
complete: (res) => {},
})
},
extraImage() {
let $this = this
console.log(this)
console.log(1111)
// 提取画布中容器所在区域内容生成相同大小的图片，返回临时文件地址
// wx.canvasToTempFilePath()
const p2 = this.widget.canvasToTempFilePath()
p2.then(res => {
console.log(this)
console.log(2222)
console.log(res)
this.setData({
src: res.tempFilePath,
width: this.container.layoutBox.width,
height: this.container.layoutBox.height
})
console.log("baocun")
core.baocun(res.tempFilePath)
})
},`
