The Canvas Has Been Tainted By Cross-origin Data

Problem i have Reffred Link :https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image. https://github.com/h5bp/server-configs-apache/blob/fc379c45f52a09dd41279dbf4e60

Solution 1:

Along with the headers, I think you need to add the crossorigin attribute to your image tag.

Example image tag:

<imgsrc="www.domain.com/image.jpg"crossorigin="anonymous" />

If you are doing this via javascript, here is the code example in the Mozilla link you provided:

var img = newImage,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // insert image url here// Notice that they set the cross origin attribute here
img.crossOrigin = "Anonymous";

Here is elevant passage from the docs (Source: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image):

The HTML specification introduces a crossorigin attribute for images that, in combination with an appropriate CORS header, allows images defined by the element loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.

And also this passage may be helpful from this page (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes):

By default (that is, when the attribute is not specified), CORS is not used at all. The "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication as described in the Terminology section of the CORS specification.