使用官方提供的 demo,wxml-to-canvas 包的引用路径做了私有化处理。
// 引用 wxml-to-canvas
"usingComponents": {
"wxml-to-canvas": "../../wxcomponents/wxml-to-canvas/src/index"
}
私有化包 wxml-to-canvas 和 widget-ui
修改 wxml-to-canvas 中对 widget-ui 的引用路径
//widget.js 中
const Block = require('../../widget-ui/dist/index.js')
使用官方提供的 demo
export const wxmlTempl = ()=>{
return `
<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>
`
}
export const styleTempl = {
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',
}
}
<wxml-to-canvas ref="drawImageRef" width="375" height="550" class="widget" ></wxml-to-canvas>
const toShareWx = async () => {
const imgContainer = await drawImageRef.value.renderToCanvas({wxml: wxmlTempl(), style: styleTempl});
const imgRes = await drawImageRef.value.canvasToTempFilePath();
}
报错:draw.js
const _drawImage = (img) => {
if (this.use2dCanvas) {
console.log('canvas:', canvas);
const Image = canvas.createImage() // 这行报错
Image.onload = () => {
ctx.drawImage(Image, x, y, w, h)
ctx.restore()
resolve()
}
Image.onerror = () => { reject(new Error(`createImage fail: ${img}`)) }
Image.src = img
} else {
ctx.drawImage(img, x, y, w, h)
ctx.restore()
resolve()
}
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。