uniapp中canvas绘制图片内容空白报错原因总结，看完需要10分钟
问题图:
效果图：
目录
🧨🧨🧨首先定义画布canvas
canvas画布初始值没有，导致没有绘制成功
🧨🧨🧨2.绘制图片没有放到wx.draw方法里面
🧨🧨🧨3.Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
🧨🧨🧨上面的都加了还存在，必杀技，延迟方法：
Canvas绘制图片流程
简单说一下canvas上绘制图片的过程
🧨先调用相机接口拍摄照片，
🧨把照片URL拿到，
🧨然后获取照片URL信息宽高，
🧨把宽高给画布，
🧨使用canvas的drawImage API把图片绘制到canvas上，
🧨绘制方法执行完成后把这个canvas导出为图片，并上传到服务器，至此流程结束。
🧨🧨🧨首先定义画布canvas
<canvas class="canvas" canvas-id="canvas"
:style="{ height: canvasHeight + 'px', width: canvasWidth + 'px' }"></canvas>
🧨🧨🧨1.画布的大小大于了图片的大小导致了生成的内容是空白的,
canvas画布初始值没有，导致没有绘制成功
解决：
//默认初始值 canvasWidth1 canvasHeight1
data() {
return {
ctx: null,
canvasWidth: 1080,
canvasHeight: 1440,
}
},🧨🧨🧨2.绘制图片没有放到wx.draw方法里面
wx.draw(false, () =>{
wx.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: 'shareCanvas', // shareCanvas 为制定 绘图canvas 的ID
success: (res) => {
this.storeImgPath = res.tempFilePath
....写入生成完成的逻辑
},
complete: (res) => {
wx.hideLoading()
}
})
})
🧨🧨🧨3.Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
canvas无法执行toDataURL方法，受污染的画布无法输出
受限于CORS 策略，会存在跨域问题，页面虽然可以使用跨域的图片（比如使用img标签或者append到页面上），因为浏览器本身不会有跨域问题，但是一旦绘制到canvas上就会污染这个canvas，导致无法提取到这个canvas的数据，也就无法输出了。
🧨🧨🧨上面的都加了还存在，必杀技，延迟方法：
//万能代码，不能用你回来找我，能用可以双击点赞评论666
console.log('正在绘制')
this.ctx.draw(false,(()=> {
setTimeout(() => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: this.canvasWidth1,
height: this.canvasHeight1,
destWidth: this.canvasWidth1,
destHeight: this.canvasHeight1,
canvasId: 'myCanvas',quality:0.6,
success: res => {
// 在H5平台下，tempFilePath 为 base64
console.log(res,'绘制完成===',)
//上传
uni.uploadFile({
url: url, //仅为示例，非真实的接口地址
filePath:res.tempFilePath,
header: {
'token': self.$store.state.token,"version":"100.0.00"
},
name: 'file',
formData: {},
success: (uploadFileRes) => {
console.log('uploadFileRes===1111',uploadFileRes)
uni.hideLoading()
},
fail(err) {
console.log(err)
uni.hideLoading()
}
});
// this.pictureArr.push(res.tempFilePath);
},
fail(err) {
console.log(err)
uni.showToast({
title:'上传图片失败!',icon:'none',
duration: 3000
})
uni.hideLoading()
}
}, this)
}, 3500)
})());🧨🧨🧨 万能代码，不能用你回来找我，能用可以双击点赞评论666
