<canvas style="height:{{canvasSize.height}}px;width:{{canvasSize.width}}px" canvas-id='share-pyq' binderror='canvasIdErrorCallback'></canvas>
(canvas直接在page下)
drawShareCanvas(){
var that = this
......//canvas绘制
this.setData({
canvasSize: { height: size.height, width: size.width, opacity: 0 }
})
ctx.draw(true,that.saveCanvasToFile)
console.log()
},
saveCanvasToFile() {
var that = this
wx.canvasToTempFilePath({
canvasId: 'share-pyq',
success: function (res) {
......//成功后的操作
},
fail(res){
console.log(res)
}
}, that)
}
控制台报错:"canvasToTempFilePath:fail:illegal arguments"
完美解决方案,在绘图过程中可能会设置canvas的宽高(this.setData()这是异步的)
setTimeout(function () {
ctx.draw(false, function () {
wx.showLoading({
title: '努力生成中...'
})
wx.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: 'longImgCanvas',
success: res => {
console.log(res.tempFilePath);
wx.previewImage({
current: res.tempFilePath,
urls: [res.tempFilePath]
});
wx.hideLoading();
that.setData({
isShowLongImgCanvas: false
});
},
fail: function (res) {
console.log(res)
}
})
});
}, 500);
牛逼,完美解决!!!
wx.canvasToTempFilePath的第二个参数this指代的是绘图所用的context对象,不是当前page