Home html What does the Crossorigin attribute at the IMG element?

What does the Crossorigin attribute at the IMG element?

Author

Date

Category

As I understand the attribute Crossorigin – for processing requests from other sources.
I reread the Internet, so really did not understand the meaning of the attribute. Does it need if I want to take and upload a picture from someone else’s site to your site? What do I need for this, in src specify the address of this picture and use the crossorigin attribute ?
The attribute values ​​do not understand at all, which means:

anonymous
Use-Credentials.

Can anyone explain the principle of operation of the attribute?

For example, the code, why is it not displayed picture from another site? What value should I add to the attribute to appear?

& lt; body & gt;
  & lt; div & gt;
    & lt; img src = "http://russian7.ru/wp-content/uploads/2014/07/2010215184904.jpg" Crossorigin = "" & gt;
  & lt; / div & gt;
 & lt; / body & gt;

Answer 1, Authority 100%

crossorigin
This attribute determines whether CORS is used when loading the image. Images, loaded using Cors , can be used in elements, not Limiting the functionality of the latter (eng. Tainted Canvas).
This attribute has 2 permissible values:
Anonymous
In this case, before downloading the image, a cross-origin query is executed (i.e., origin is used: HTTP Header). However, the access parameters (no cookie nor the X.509 certificate or the login / password for basic authentication on HTTP) are transmitted. The server’s response must be present an Access-Control-Allow-Origin header: HTTP Header, otherwise the use of the image is limited.
Use-Credentials
Before loading an image, a cross-origin query is executed (Origin: HTTP Header) with an access parameters (as a cookie, certificate or pair of login / password). In response, the server must be present an Access-Control-Allow-Origin header: HTTP Header, otherwise the use of the image is limited.
If this attribute is not specified, CORS is not used when loading the image (no origin header: HTTP HEADER), and the use of the image is always limited. With the incorrect attribute value (for example, when typing), Anonymous value is used. For more information, refer to the article Cors Settings attributes .
source


Answer 2, Authority 67%

crossorigin need when you want to load the image from someone else’s site to use it in the Canvas element, which allows you to make various manipulations with the image. For example, the library, to create violets in the browser, HTML2CANVAS will not be able to capture pictures on the page if they lie on another site, here and can help this attribute, but the resource on which the images have to transmit the heading Access-Control-Allow-Origin .

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions