canvas.toDataURL() 报错 SecurityError: The operation insecure.

Question

在使用 .toDataURL() 方法时，遇到以下报错：

这通常是由于浏览器安全策略导致的。以下是解决该问题的攻略：

方案 1：使用同源图片

在使用 canvas.toDataURL() 方法时，如果您使用的图片不是同源的，可能会导致报错。您可以尝试使用同源图片来解决该问题。示例如下：

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
};
img.src = 'http://example.com/image.png';

在上面的示例中，我们使用了同源图片来解决 canvas.toDataURL() 报错的问题。

方案 2：将远程地址转换为本地地址

可以先下载到本地，然后通过浏览器 File API 转换为 blob 的地址：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (this.status == 200) {
    var blob = this.response;
    var reader = new FileReader();
    reader.onloadend = function() {
      var dataURL = reader.result;
    };
    reader.readAsDataURL(blob);
  }
};
xhr.send();

在上面的示例中，我们使用了服务器代理来获取图片数据，从而解决了 canvas.toDataURL() 报错的问题。

方案 3：跨域设置 crossOrigin​="anonymous"​

crossOrigin="anonymous" 是一个 HTML 属性，用于指示浏览器在加载外部资源时是否应该使用 CORS（跨域资源共享）机制。该属性告诉浏览器，即使请求跨域资源，也不应该发送用户的凭据（如 cookie、HTTP 认证等）。这有助于防止跨站点脚本攻击（XSS）和跨站点请求伪造（CSRF）等安全问题。

var img = new Image();
img.crossOrigin = 'Anonymous';

方案 4：服务器中转

如果您无法使用同源图片，您可以尝试使用服务器中转解该问题。您可以将图片上传到服务器，并使用服务器来获取图片数据。

结论

使用 canvas.toDataURL() 方法时，可能会遇到 SecurityError: The operation is insecure. 的报错。您可以尝试使用同源图片或者使用服务器代理来解决该问题。如果您想深入了解 canvas.toDataURL() 方法的知识，请参考相关的文档和教程。