Canvas errors & CORS All In One

Canvas errors & CORS All In One

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

solution

<img crossorigin="anonymous" data-src="" src="" />

demos

https://renmingliang.github.io/vue-lottery/#/lottery

https://github.com/renmingliang/vue-lottery

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

Allowing cross-origin use of images and canvas

HTML provides a crossorigin attribute for images that, in combination with an appropriate CORS header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.

HTML 为图像提供了 crossorigin 属性，该属性与适当的 CORS 标头相结合，允许从外部源加载的 <img> 元素定义的图像在 <canvas> 中使用，就好像它们是从当前源加载的一样 。

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

refs

https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported

https://github.com/niklasvh/html2canvas/issues/1614

https://github.com/fabricjs/fabric.js/issues/5046

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---