Cross-origin image resource permissions (CORS enabled image)

The HTML specification document introduces the crossorigin attribute for images. By setting the appropriate header information CORS, img images can be loaded from other sites and used in canvas as if they were downloaded directly from the current site (current origin).

For details on using the crossorigin attribute, see CORS settings attributes.

What is “tainted” canvas?

Although it is possible to use images in canvas without CORS authorization, doing so will taint the canvas. Once the canvas is polluted, you can no longer extract data from the canvas, which means you can no longer call methods such as toBlob(), toDataURL(), and getImageData(), otherwise a security error will be thrown.

This is actually to protect the user's personal information and avoid loading the user's image information from remote web sites without permission, which would cause privacy leakage.

(Translator's note: If the user has logged into social networking sites such as QQ, if there is no protection, after opening a certain website, the website may use canvas to obtain and upload the user's image information, thus causing leakage.)

Example: Save image from other site

First, the image server must set the corresponding Access-Control-Allow-Origin response header. Add the crossOrigin attribute of the img element to the request header. For example, for Apache server, you can copy the configuration information in HTML5 Boilerplate Apache server configs to respond:

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
    <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
        SetEnvIf Origin ":" IS_CORS
        Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
    </IfModule>
</IfModule> 

With these settings in effect, you can save images from other sites to DOM storage (or elsewhere) just like your own resources.

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // Specific image address img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// Ensure that cached images also trigger the load event if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

Browser compatibility

Desktop

Mobile

See also

Chrome: Using cross-origin images in WebGL

HTML Specification - crossorigin Attribute

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.