## 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)
})
},`
