通过CANVAS的toDataURL、toBlob、getImageData方法可以获取其image数据。但有时候会报Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported的异常。
原因是,canvas绘制了其他域的image,出现跨域问题。此处的跨域问题虽然不影响canvas的图像正常显示,但却不能执行上述三个方法来获取其内容。
修改方式,两步:
1、在img元素中增加crossOrigin属性。增加属性的方法又有两种:
(1)img.crossOrigin="Anonymouse"
(2)<img src="..." crossorigin="Anonymous" />
2、将img请求的response heard里增加Access-Control-Allow-Origin: *信息。
参考:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image