Cross-Origin Image: Tainted Canvas

c4am95

I'm loading an image in my sketch from an S3 bucket, and the CORS policy is set up correctly to allow all domains access. The problem is that processing.js is probably requesting the image without setting the "Origin" header. The result is that the image downloads just fine, but a js error is thrown once processing.js tries to use the image with the canvas. This is the error that gets thrown:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

I was thinking of hosting my own processing.js which properly sets the request header. I'm wondering if anyone else has run into this issue before and if there's a better way to handle this?

Thanks!

GoToLoop

What you describe is correct. Pjs doesn't request CORS from loaded resources. :-&
Therefore all resources should be inside its folder domain if we intend to access their pixels[]. :((

c4am95

Thanks for the reply! FYI, if anyone ever runs into this issue and wants a solution, you can add a line of code (in processing.js) in the block that actually fetches the images.

In the code block starting with this.imageCache = {, there is an if block like so:

// No image in the DOM, kick-off a background load if (!img) { img = new Image(); img.onload = (function(owner) { return function() { owner.pending--; }; }(this)); this.pending++; img.src = href; }

If you add img.crossOrigin = ''; right before img.src = href;, the javascript will fetch the images with the proper headers.