Getting a data URI for cross-domain content?
===

For all intents and purposes, let's say I have a webpage with an input field where users can enter an image URL, click a button, and be given a data URI for the resource at the other end of their URL (e.g., the Google logo). 

Reading around, I learned that you can get data URIs for images like so:

    function imageToDataURI(src,callback)
    {
    	var canvas = document.createElement('canvas'),
            img    = document.createElement('img');

        img.onload = 
            function()
            {
                canvas.width  = img.width;
                canvas.height = img.height;
                canvas.getContext('2d').drawImage(img, 0, 0);
                callback(canvas.toDataURL());
            };
        img.src = src;
    }

However, a lot of people (myself included) are getting "SECURITY_ERR: DOM Exception 18" because canvas elements get tainted when cross-domain images are drawn on them and tainted canvases return the above error on canvas.toDataURL() (see [Why does canvas.toDataURL() throw a security exception?][2]). My problem is: I really need to support cross-domain URLs!

What can I do?


  [2]: http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception
