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.
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();
}