Javascript CORS image / canvas manipulation

Question

I am trying to get an image from another domain that I configured for CORS resolution and manipulate the pixels, and then I want to display the result and be able to manipulate the result. I can use both getImageData and toDataURL on the image I requested, so I know that part of the server is working. However, when I try to change the src attribute of the image to dataURL from the canvas, I get the error message "Cross-original loading failed, prohibited 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 zero in the manipulation function, then it works. Why is this?

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

Answer 1

Ok, I looked at the documents in the crossorigin attribute .

Here is the relevant information:

crossorigin HTML5

This enumerated attribute indicates whether to select a linked image using CORS or not. CORS-enabled images can be reused in an element without being corrupted. Valid Values:

anonymous
A cross origin request is executed (i.e. with Origin: HTTP header). But no credentials are sent (i.e., neither a cookie, nor an X.509 certificate, nor HTTP authentication is sent). If the server does not provide credentials to the source site (without setting the Access-Control-Allow-Origin: HTTP header), the image will be corrupted and its use will be limited.

consumer powers
A cross-search request (i.e., with the Origin: HTTP header) is executed with the credentials sent (i.e., a cookie, certificate, and basic HTTP verification). If the server does not provide credentials to the source site (via the Access-Control-Allow-Credentials: HTTP header), the image will be corrupted and its use will be limited.

If not, this resource is retrieved without a CORS request (i.e., without sending the Origin: HTTP header), which prevents the use of its uncovered elements. If this is not correct, it is treated as if an anonymous enumerated keyword was used.

So, I assume that the null value is either either not present or is invalid, in which case it is treated as anonymous.