javascript - 为什么添加 crossOrigin 会破坏 fabric.Image.fromURL？

Question

我有一个图像编辑器，我正在尝试向其中添加外部图像。

当我将 crossOrigin 属性添加到 img 对象时，它无法将图像加载到 Canvas 上，并且我在控制台中收到错误消息“加载错误 https://i.ytimg.com/vi/JphpLkmimVo/hqdefault.jpg”。如果我删除 crossOrigin 它允许添加图像但是当我将 Canvas 导出为图像时我会收到安全错误。我读过在没有 crossOrigin 的情况下添加它会污染 Canvas 。谁能告诉我为什么我可以只保留 crossOrigin 属性？

var stockImageSrc = 'https://i.ytimg.com/vi/JphpLkmimVo/hqdefault.jpg';
fabric.Image.fromURL(stockImageSrc, function (oImg) {
                        oImg.setWidth(640);
                        oImg.setHeight(390);
                        canvas.add(oImg); 
                        canvas.renderAll();
                    }, { crossOrigin: '' });

Here is a demo

Answer 1

根据我的经验，您必须将 crossOrigin 设置为 Anonymous。在一个例子中:

var stockImageSrc = 'https://i.ytimg.com/vi/JphpLkmimVo/hqdefault.jpg';
fabric.Image.fromURL(stockImageSrc, function (oImg) {
    ... other code here...
 }, { crossOrigin: 'Anonymous' });

这直接来自 Mozilla developer documentation .

但是，您还会在该文档中看到并非所有浏览器(即 Internet Explorer)都支持此功能。我发现它在 IE10 及更早版本中不有效 - IE11 确实有效。我正在为 IE10 及更早版本使用解决方法 - 请参见下文。这不起作用的原因是旧版本的 IE 没有实现完整的 CORS 规则集，也没有将完整的 HTML5(Canvas 是其中的一部分)添加到它的代码库中。然而，Firefox 和 Webkit 浏览器(Chrome、Safari 等)一直在更新，因此它们在这些更新的标准中远远领先于 IE 对应物。

另一方面，托管图像的服务器确实需要将 Access-Control-Allow-Origin header 设置为发出请求的页面域或到 *。这来自 Mozilla CORS documentation .正如@CBroe 上面提到的，您引用的 youtube 图片 NOT 没有设置该标题。因此这张图片会污染你的 Canvas 。

解决 IE10 及更早版本的 crossOrigin 的方法是使用服务器端代理，我猜这个解决方法可能适用于没有设置 Access-Control-Allow-Origin header 的图像。这里的概念是您将 YouTube 图像请求发送到托管您的网页的同一域中的服务器。这使所有图像请求都在同一个域中，从而通过 CORS 规则。但是 YouTube 图片当然不托管在该服务器上。然后，在您的服务器上响应的脚本会请求 YouTube 服务器(或任何其他服务器)，在服务器上捕获图像，然后将其传回浏览器。这可以通过 CURL 请求或其他一些方法来完成。确保从代理服务器设置 Access-Controls-Allow-Origin header 。您可以在 CORS Server Proxy here 上找到更多信息.

综上所述，遗憾的是您的问题没有快速/简单的答案。浏览器正试图为其用户提供最高的安全性，跨站点脚本可能会产生一些可以窃取身份等的问题。这就是需要跳过额外环节的原因。

另外值得注意的是，您可以查看 JSONP 解决方案(CORS 的替代方案)，但它是一个较旧的标准并且有一些负面影响 - 我相信它在一些更现代的浏览器中没有得到完全支持并且存在一些安全问题。快速进行 Google 搜索以了解有关该选项的更多信息。