How to realize cross-domain picture resource permission CORS enabled image

This article mainly introduces how to achieve cross-domain picture resource permissions CORS enabled image, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The HTML specification document introduces the crossorigin property for images. By setting the appropriate header information CORS, you can load img images from other sites and use them in canvas, just like downloading them directly from the current site (current origin).

What is "tainted" canvas?

Although images can be used in canvas without CORS authorization, doing so will taints the canvas. As long as the canvas is contaminated, you can no longer extract data from the canvas, that is, you can no longer call methods such as toBlob (), toDataURL () and getImageData (), otherwise a security error (security error) will be thrown.

This is actually to protect users' personal information and avoid unauthorized loading of users' image information from remote web sites, resulting in privacy leakage.

Example: save a picture from another site

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

SetEnvIf Origin ":" IS_CORS Header set Access-Control-Allow-Origin "*" env=IS_CORS

After these settings take effect, you can save images from other sites to DOM storage (or somewhere else), just like the resources on this site.

Var img = new Image, canvas = document.createElement ("canvas"), ctx = canvas.getContext ("2d"), src = "http://example.com/image"; / / specific picture 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;// ensures that the cached picture also triggers the load event if (img.complete | | img.complete = undefined) {img.src = _ "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = src;}

Thank you for reading this article carefully. I hope the article "how to achieve cross-domain picture resource permissions CORS enabled image" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!