2022-09-28 "canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

前言：uniapp+vue项目，调用uni.canvasToTempFilePath方法绘制画布，报错：

"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

“canvasToTempFilePath:fail SecurityError:无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出已损坏的画布。”

原因：图片文件跨域。

解决方案：前端需要把跨域的图片设置成允许跨域，在img标签里添加代码：crossorigin="Anonymous"

<img :src="img" class="img" crossorigin="Anonymous" @ckick="showimg(img)">

后端需要设置允许跨域，即：Access-Control-Allow-Origin: *

我的报错是运行在h5端里报错的，app还不知道。以前使用微信开发者工具开发没遇到这种问题，现在需求多了，问题便接踵而至。

其实就是我本地的ip是局域网ip，而我调用的图片是网络路径，不同源不同域故而报错。

注：跨域问题需要前后端配合，当然有些情况下前端不用管，只需要后端修改就可以了。

如果画布中需要用到网络图片，并且后端已经允许跨域了，但前端还是报跨域，那么你可以尝试给该网络图片地址后缀添加随机数。

例如：

ctx.drawImage(image);

这个image指向后端传递回来网络图片，那么修改为👇

let a = new Date().getTime();

ctx.drawImage(image+'?t='+a);

如此如此。我最后就是这样解决掉跨域问题的。