Javascript CORS image / canvas manipulation

Question

I am trying to retrieve an image from another domain which I have configured to allow CORS and manipulate pixels and then I want to display the result and be able to manipulate the result. I am able to use both getImageData and toDataURL on the image that I have requested so I know that the server part works. However when i try to change the src attribute of the image to the dataURL from the canvas I get the security error "Cross-origin image load denied by Cross-Origin Resource Sharing policy.".

function manipulateImage(img, func) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    c = canvas.getContext('2d');
    c.drawImage(img, 0, 0);

    width = canvas.width;
    height = canvas.height;
    imageData = c.getImageData(0, 0, width, height);
    y = 0;
    while (y < height) {
        x = 0;
        while (x < width) {
            var pixel = getPixel(imageData, x, y);
            func(pixel);
            setPixel(imageData, x, y, pixel);
            x++;
        }
        y++;
    }
    c.putImageData(imageData, 0, 0);
    console.log('done');
    img.src = canvas.toDataURL();
}


$(function() {
    img = new Image();
    img.crossOrigin = '';
    img.onload = function() {
        document.body.appendChild(img);
    }
    img.src = 'https://choros-cognition-test.s3.amazonaws.com/geotiffs/X8pEm_cl3_sm16_ra15_style_warp.png'

    $('#increase-button').on('click', function() {
        manipulateImage(img, function(pixel) {
            pixel[2] += 30;
        });
    });
});

The strange part is that if I reset the crossOrigin attribute of the image to null in the manipulateImage function then it works. Why is this?

function manipulateImage(img, func) {
    img.crossOrigin = null;
    ....

score 0 · Answer 1 · answered Feb 11 '14 at 13:01

Well I looked up the docs on the crossorigin atribute.

Here's the relevant information:

crossorigin HTML5

This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. CORS-enabled images can be reused in the element without being tainted. The allowed values are:

anonymous
A cross-origin request (i.e. with Origin: HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted and its usage restricted..

use-credentials
A cross-origin request (i.e. with Origin: HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in elements. If invalid, it is handled as if the enumerated keyword anonymous was used.

So my guess is that null is either the same as not being present or being invalid in which case it is handled like anonymous.

Javascript CORS image / canvas manipulation

1 Answers1

Linked