Forums » Help » canvas tainted by cross-origin data

This post carried over from Error running demos locally in Chrome.

My app--on MAMP, Chrome 20.0.X, OSX 10.7--needs to load third-party images via an external URL. So, I did this:

var url = 'http://some.url.com/pix/001.png';
this.pix = new ig.Image(url);

This works as long as ig.system.scale is 1.

The moment it's not, image.js attempts to resize the image after load:
1. it creates a new context
2. draws its (cross-origin) data into it
3. attempts to read the pixels (getImageData),

at which point Chrome complains:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

Any advice on how to work around this (other than dumping Chrome) much appreciated.

PS: tried setting crossOrigin to '', and saving incoming data to local storage, but no. Chrome plugged all the loopholes, it seems.

var image = new Image();
image.crossOrigin = '';
image.src = 'http://some.url.com/pix/001.png';

Be careful, you're playing with fire.

Thanks, Quid. I tried that already: still fails, this time with another warning.

I realize the risk; not trying to breach anything but rather just display, in-app, user profile pix from third-party service, at ig.system.scale 2. One would think that would be easy.

There are two ways that I know of to reliably do this.

1) Use a server as a proxy that is on the same domain as your game. Your game makes a request to the server, which calls out to get the image, and then serves it as its own, either as a temp image or raw pixel data sent as JSON.

2) Write a bit of code that can map Impact's scaling ratio to coordinates relative to the canvas element. If you were going to display the user's image for use in an RPG-like dialog box, for example, figure out where, relative to the upper left corner of the canvas, the box would be. Position an <img> there using CSS (set position to absolute), set to the proper size (again using CSS), and set the src to the remote image. This is assuming your usage is pretty static, meaning you're not using the profile image as a moving sprite or something.

If you need more details, or something doesn't make sense, let me know!

Thanks Kirby. I'd like to keep it inside impact as much as possible, so it looks #1 is the ticket for us. I'll set up simple node fetcher and see what comes up.

Cheers
A.

EDIT:
and... not. Keeping a server busy for that won't make sense in our case. I'll look into #2. Problem is, though, that I wanted to sandwich the profile pix between 2 impact layers. Something which AFAIK is impossible if I work with other DOM objects.