Question

Edit:
Taking dennmat’s suggestion into consideration, I have managed to simplify my image acquiring script down to a few lines using Image():

window.onload = function(){
    var img;
    capture_canvas          = document.createElement('canvas');
    capture_canvas.width    = 1000;
    capture_canvas.height   = 1000;
    document.documentElement.appendChild(capture_canvas);
    img = new Image();
    img.crossOrigin = "Anonymous";        
    img.src = "http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/users/1196739508/post/41-1330377498/41-1330377498_thumb.jpg";
    img.onload = function() {
        var context, canvas_img;
        context = capture_canvas.getContext('2d');
        context.drawImage(img, 0, 0, 255, 255);
        canvas_img = context.getImageData(0, 0, capture_canvas.width, capture_canvas.height);
    }
}

While this works for Chrome and Firefox, this does not for IE9. The solution mentioned in the following link doesn’t seem to apply to this situation. Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie

Is the cors feature in Image() supported by IE9?

---

I’ve run into a wee little problem.

http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/resources/images/sample/sample.png

The above image is actually a file that contains the standard png header, followed by 255 bytes going from 255 down to 0 (twice). The idea was to see how Internet Explorer 9 handled receiving binary data through an AJAX request.

So, here’s my problem: I’ve noticed that when I receive a byte on the client that’s greater than 127, the value is defaulted to 253. Is there a way to get IE to read the extended bytes with the correct values?

A few things to take note of:

1) We do not use any sort of javascript framework. It is a requirement that we do this only with bare bones javascript.

2) The intent of this experiment is to make a clean way to get an image so I can place it on a canvas without tainting it. Sometimes these images come from our externally hosted image server, other times it will come from another host that we have no control over.

Attached below is my testing script:

var request;
window.onload = function(){
    request = new XMLHttpRequest();
    if (window.XDomainRequest) {
        request = new XDomainRequest();
    }
    request.open('GET', 
        "http://www.shangalulu.com/get_resource_no_64.php?url=
         http://www.shangalulu.com/resources/images/sample/sample.png", true);
    request.onload  = function()
    {
        var binary, i, response;
        response = this.responseText;
        binary = "";
        if (this.contentType)
        {
            document.documentElement.appendChild(
                document.createTextNode(this.contentType));
            document.documentElement.appendChild(document.createElement('br'));
        }
        for( i=0; i < response.length; i++) {
            binary = "Line " + (i) + " --> " + ((response.charCodeAt(i)) & 0xff);
            document.documentElement.appendChild(document.createTextNode(binary));
            document.documentElement.appendChild(document.createElement('br'));
        }
    };
    request.send();
}

Answer 1

Unfortunately, using the Image() object with the crossOrigin property set to “Anonymous” still caused IE to taint the canvas once the image was drawn onto it.

To get around this, I did the following:

1. I created a little script on my server that accepts a url, then calls file_get_contents() using the url given to it. To prevent misuse of this script, I added in a list of “acceptable” domains, as well as tailored the resulting URL to only point to things it should be requesting for. This lets me make the requests locally, which means that I can use the XMLHttpRequest object instead of the XDomainRequest object. (which also opens the door for supporting IE7 ).

2. Since IE does not support atob, I used the base64 conversion script found here: How can you encode a string to Base64 in JavaScript?
   I commented out input = Base64._utf8_encode(input); in the encode function, as the data was binary, and not an actual string of characters.

This solution is a bit of a “last resort”. It works, however it is incredibly slow (takes 3 minutes instead of the usual 3 seconds). The worst part of it all was the need to add in a timer to give IE a chance to render the custom dialog box and its progress bar properly. The timer forces IE to pause a moment before making the next request. This is… rather odd considering that I have it set to make the request asynchronously.

This is the best I could come up with for now. If anyone else has a better way of getting the job done, feel free to post your answers.