canvas.toDataURL 由于跨域报错的解决方法

Posted 2022-11-14 blogs-xlf

关于canvas.toDataURL 由于跨域报错的解决方法

用过canvas，都知道toDataURL这个方法真好用，不仅合成图片用到它，压缩图片也用到它。但有一个问题，就是图片源不能跨域，不然会报错：

Uncaught DOMException: Failed to execute 'toDataURL' on 'htmlCanvasElement': Tainted canvases may not be exported.

解决方法，相信大家都知道了，就是在图片img加上crossOrigin属性，赋值为Anonymous。但还有一个关键的地方，就是设置crossOrigin要在设置src地址之后，否则是没有效果的：

var img = new Image();
img.src = '.....';  //顺序不能错
img.setAttribute("crossOrigin",'Anonymous');