Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported错误原因
报错信息如下图所示。
出现这个错误的原因是因为 canvas.toDataURL 中的图片涉及到跨域问题，导致了画布被污染（tainted）。
浏览器实施了一个安全策略，称为”同源策略”，它防止网页从加载图片时读取来自不同源（域）的像素数据。
比如如下的代码就会导致该问题，因为这里的 img 是跨域的。
const img = new Image();
img.src = 'http://www.example.com/此处为一个跨域图片.png';
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
// 将图像数据转换为 Data URL
const dataURL = canvas.toDataURL('image/png');
为了解决这个问题，可以使用如下两种解决方法中的任意一种：
- 确保你的图片和网页位于同一个域名下。将图片上传到与你的网页相同的域名或使用相对路径。
- 在服务器端设置 CORS（跨域资源共享）头，允许来自你网页所在域名的请求访问图片资源。
- 本博客所有文章除特别声明外，均可转载和分享，转载请注明出处！
- 本文地址：https://www.leevii.com/?p=3510