Failed to execute 'toDataURL' canvas导出图片报错——之进阶

canvas绘图并调用**canvas.toDataURL()**方法的时候经常会报错如下:
Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
在这里插入图片描述
此时,几乎老铁们给出的答案都是为绘制图片添加允许跨域设置;
比如:image.setAttribute(‘crossOrigin’, ‘anonymous’)。

但是,重点来了,在设置了允许跨域属性的情况下仍会出现此报错。

情景描述:绘制图片设置了允许跨域属性,页面首次绘制图片并导出没有问题;
在不刷新浏览器的情况下,再次绘制并导出图片(注意:第二次绘制图片和第一次绘制图片一样或有重复)则会报错。

说明:页面一次性绘制图片可能多张,如上图报错4次,就是因为此次绘制图片有4张图和前一次是重复的。

此时问题已清楚,报错是因为两次绘制图片一致而导致的,那么老铁们尽情发挥想象力想办法解决此问题即可。

目前解决方案为:为图片路径结尾拼接时间戳。
例如:www.baidu.logo.jpg?1354445474

该图片纯属虚构,只供提供参考方案。

你可能感兴趣的:(toDataURL,canvas导出图片报错)