javascript - 如何获取外部图像并将其在客户端 WebApp 上编码为 base64？

Question

这是当前代码:

toBase64(url, callback, outputFormat){
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
    canvas = null; 
  };
  img.src = url;
}

我找不到解决 CORS 错误的方法来检索外部图像。
另外，我使用x-ray在我的 NodeJS 服务器中，它能够检索相同的图像。我认为，这意味着也可以在客户端解决 CORS 错误。

Answer 1

不幸的是，CORS 限制专门适用于网页。您的服务器不会遇到 CORS 错误，因为它生活在一个您对机器有一定控制权并且是可信用户的世界中。浏览器中的网页则是另一回事。它们完全受浏览器的授权来批准和促进任何网络使用。

也就是说，有许多著名的方法可以绕过 CORS，例如利用对脚本标记发出的请求的更自由的限制。然而，几乎所有这些都只涉及 GET 请求，因此您可能不走运。

我的建议是使用您的服务器作为一种代理。创建特殊端点，通过您自己的服务器路由请求和响应，这样您就可以从根本上逃脱 CORS。它会给您的服务器带来更大的压力，但我之前已经这样做过并且效果很好。