在图片加载前给所有 img 标签添加 crossorigin="anonymous"

Question

I'm having problem with my canvas throwing errors because of it trying to load cached images described here: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

To solve this I want to add crossorigin="anonymous" to all the images on my site, but how can I do that before the images are loaded, so that they are loaded with the proper headers that won't crash my canvas?

 $('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

The way you are doing should work (after fixing the syntax errors), you have to handle the setting of the crossOrigin attribute before the next microtask checkpoint , meaning you must do it synchronously and not in an async script or in an event handler.

However, browsers didn't always follow this rule and in some, the loading of cached images could be done synchronously. So to avoid falling in such case, you could simply set the src again to the same value, in order to force the browser to load the resource using the proper headers.

 $('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">

But in your position I'd double check why I need to do it at this time, the proper fix is obviously to set the attribute from the beginning:

 // 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">

Note however that the image in your question is being served by Amazon S3 with a Vary: Origin header only when requested as cross-origin, which will make Chrome still use the cached version, even if the crossOrigin attribute is set, see this Q/A for more info .

The only way around in that case is to always set the crossOrigin attribute.