在加载图像之前将 crossorigin="anonymous" 添加到所有 img 标签

Question

我的画布抛出错误时遇到问题，因为它试图加载此处描述的缓存图像： https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

为了解决这个问题，我想将crossorigin="anonymous" 添加到我网站上的所有图像中，但我该如何在图像加载之前执行此操作，以便加载正确的标题而不会使我的画布崩溃？

$('img').each(function() {
     var $img = $(this);
     $img.attr('crossorigin',anonymous);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img width="50%" src="https://ychef.files.bbci.co.uk/1600x900/p08ysrxd.webp">

Answer 1

你正在做的应该可以工作（在修复语法错误之后），你必须在下一个微任务检查点之前处理crossOrigin属性的设置，这意味着你必须同步进行并且不在异步脚本或事件处理程序中。

但是，浏览器并不总是遵循此规则，在某些情况下，缓存图像的加载可以同步完成。因此，为避免出现这种情况，您可以简单地将src 再次设置为相同的值，以强制浏览器使用正确的标头加载资源。

$('img').each(function() {
  var $img = $(this);
  $img.attr({
    crossorigin: "anonymous",
    src: this.src
  });
});

// test we loaded it with the proper headers
$(window).on("load", () => {
  const canvas = document.createElement("canvas");
  canvas.getContext("2d").drawImage($('img')[0], 0, 0);
  console.log('cross-origin enabled', !!canvas.toDataURL());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img width="50%" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">

但是在你的位置上，我会仔细检查为什么我现在需要这样做，正确的解决方法显然是从头开始设置属性：

// test we loaded it with the proper headers
window.onload = () => {
  const canvas = document.createElement("canvas");
  canvas.getContext("2d").drawImage( document.querySelector('img'), 0, 0);
  console.log('cross-origin enabled', !!canvas.toDataURL());
};

<img crossorigin="anonymous" width="50%" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">

但请注意，Amazon S3 仅在作为跨域请求时才使用 Vary: Origin 标头为 the image in your question 提供服务，这将使 Chrome 仍使用缓存版本，即使设置了 crossOrigin 属性，请参阅this Q/A for more info.

在这种情况下，唯一的解决方法是始终设置 crossOrigin 属性。