在前端开发中，Canvas 是一个广泛应用的图像处理工具。其中 toDataURL() 方法可以将 Canvas 中的内容转换成 base64 编码的 data URL 字符串，方便传输和存储。然而，在某些情况下，我们可能会遇到 SecurityError 错误，从而导致该方法无法正常使用。本文将深入讨论这个问题，并提供解决方案。
1. SecurityError 的原因
在浏览器中，JavaScript 的安全性是由同源策略（Same Origin Policy）来保障的。简单来说，就是指只有当两个页面的协议、域名和端口号都相同时，它们之间才能自由地进行数据交互。
而在使用 toDataURL() 的过程中，如果当前页面与被处理的图片不符合同源策略，就会抛出 SecurityError 错误，阻止数据的传输。
例如，以下代码尝试在页面上绘制一张来自另一个域名的图片，并将其转换成 data URL：
-- -------------------- ---- ------- ----- ------ - --------------------------------- ----- --- - ------------------------ ----- --- - --- -------- --------------- - ------------ ------- - ------------------------------- ---------- - -------- -- - ------------------ -- --- ----- ------- - ------------------- --
如果 http://example.com 没有设置允许跨域访问的响应头（Access-Control-Allow-Origin），那么就会触发 SecurityError 错误。
2. 解决方案
既然是同源策略导致的问题，那么解决起来也自然是要从同源策略入手。以下是几种常见的解决方案：
2.1 设置图片跨域属性
我们可以通过将图片的 crossOrigin 属性设置为 'anonymous'，来启用 CORS 跨域资源共享机制。这样一来，在服务器端设置好响应头之后，浏览器就能够识别该图片并在 Canvas 中绘制它了。
-- -------------------- ---- ------- ----- ------ - --------------------------------- ----- --- - ------------------------ ----- --- - --- -------- --------------- - ------------ -- ------ ------- - ------------------------------- ---------- - -------- -- - ------------------ -- --- ----- ------- - ------------------- --
需要注意的是，只有当被请求的图片在服务器端设置了正确的 CORS 头部信息时，才能成功获取到数据。
2.2 使用代理服务器
如果无法控制被处理的图片所在的服务器，或者服务器没有开启 CORS 支持，我们可以使用一个代理服务器来中转请求，使得请求与响应都处于同源环境中。
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = '/proxy?url=' + encodeURIComponent('http://example.com/image.png');
img.onload = function () {
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL();
};在这个示例中，我们把请求的 URL 修改为了一个代理服务器的地址，同时将原始的图片 URL 作为参数传递给代理服务器。当代理服务器接到请求后，会自动向原始服务器发出请求，并将响应数据返回给前端页面。由于代理服务器和前端页面处于同源环境中，因此就可以正常使用 toDataURL() 方法了。
2.3 使用 Blob 对象
最后一种解决方案是使用 Blob 对象，在前端生成一个二进制文件，并以 data URL 的形式输出内容。这种方式不需要跨域访问，因此也能够避免
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13398