Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

这个错误通常出现在使用canvas元素时，它加载了跨域的图片资源。在这种情况下，浏览器会认为canvas元素被污染（tainted），因此无法通过toDataURL方法导出canvas的内容。解决方法是确保canvas元素只加载同源的图片资源。如果必须要加载跨域的图片资源，可以通过设置图片的CORS属性来允许跨域访问。具体方法可以参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image

`Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported` 是一个常见的错误消息，它表示在尝试将带有跨域图像的画布导出为数据URL时发生了问题。这通常是由于浏览器的安全策略所致，以防止跨域图像被恶意使用。 解决此问题的方法有两种： 1. 使用服务器代理：将跨域图像加载到服务器上，然后通过服务器代理将图像传递给画布。这样可以避免跨域问题，并成功导出数据URL。 2. 使用CORS（跨域资源共享）：如果您有控制跨域图像的服务器，可以在服务器上配置CORS头，以允许从其他域加载图像。这样，浏览器将允许导出数据URL。 以下是两种解决方法的示例代码： 1. 使用服务器代理： ```javascript // 在服务器端将跨域图像加载到画布上 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 在此处可以导出数据URL }; img.src = 'http://example.com/image.jpg'; // 跨域图像的URL // 通过服务器代理将图像传递给画布 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 在此处可以导出数据URL }; img.src = '/proxy?url=http://example.com/image.jpg'; // 服务器代理的URL ``` 2. 使用CORS： ```javascript // 在服务器端配置CORS头 // 在响应中添加以下头部信息 Access-Control-Allow-Origin: http://your-domain.com // 在客户端加载跨域图像 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 在此处可以导出数据URL }; img.src = 'http://example.com/image.jpg'; // 跨域图像的URL ```