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

### 解决方案 当遇到 `Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported` 错误时，主要原因是浏览器的安全策略阻止了跨域图像数据的访问。为了防止潜在的安全风险，浏览器不允许将包含外部资源（尤其是来自不同源的图像）的画布转换为数据URL。 #### 方法一：设置CORS头 服务器端可以通过配置响应头来允许跨域资源共享 (CORS)，从而使得客户端可以合法地加载并操作这些资源。具体来说，在提供图片资源的服务端添加如下HTTP头部： ```http Access-Control-Allow-Origin: * ``` 这表示任何域名都可以请求此资源。对于更严格控制的情况，则可以用具体的域名代替星号[^1]。 #### 方法二：使用代理服务 如果无法修改远程服务器上的 CORS 设置，另一种解决方案是在同一域内创建一个简单的 HTTP 代理脚本。这个脚本负责向目标 URL 发起请求并将返回的内容转发给前端应用。通过这种方式，所有的网络通信都发生在同一个源下，因此不会触发同源策略限制[^2]。 #### 方法三：确保所有资源都是本地文件或来自相同源 最简单的方法就是保证所使用的全部媒体素材要么托管在同一台服务器上，要么是从支持适当 CORS 头部的可信第三方获取而来。这样可以直接绕过跨域问题[^3]。 #### JavaScript 实现示例 下面是一个基于上述原则调整后的JavaScript代码片段，用于处理 OpenLayers 地图导出 PDF 的场景: ```javascript // 假设 map 是已经初始化好的OpenLayer地图实例对象 map.once('postrender', function () { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 获取当前视口大小，并据此设定新创建的<canvas>尺寸 const size = map.getSize(); canvas.width = size[0]; canvas.height = size[1]; // 将地图渲染上下文复制到新的<canvas> Array.prototype.forEach.call( document.querySelectorAll('.ol-layer canvas'), function (layerCanvas) { if (layerCanvas.width > 0) { // 防止空白层干扰 let transform = layerCanvas.style.transform; transform = transform.replace(/^matrix\(([^\(]*)\)$/, '$1'); transform = transform.split(',').map(Number); // 应用变换矩阵以保持坐标系一致 ctx.setTransform(...transform); // 使用 drawImage 绘制每一层至最终输出的<canvas> ctx.drawImage(layerCanvas, 0, 0); } }); // 导出前先尝试清除现有样式属性中的transform影响 ctx.setTransform(1, 0, 0, 1, 0, 0); // 如果一切正常，此时应该能够成功调用toDataURL() try { console.log(canvas.toDataURL()); } catch(e){ alert(`Error exporting image:\n${e.message}`); } }); ```