Sadly, I see a zillion similar questions but no answers that seem specific to my situation. I am not using jquery. I don't care about anything but the newest browsers (Chrome in particular). I am looking for a way to load a javascript Image from a cross-domain fetch of a PNG or JPG file.

i.e. I just want to do this:

```
var img1 = new Image();
img1.addEventListener('load', function() { imageLoaded( canvas, context, this); }, false)
img1.src = textureUrl;

```

which works great for same domain. However, apparently that will not include the Origin tag in the request header, so it is unable to work in a cross-domain environment, even though we have successfully set up the CORS headers on the servers. If there is something simple I can do to this request to include that header, that would be great.

But I gather what I have to do is use XHR to do an async fetch of the asset, to get the binary data, and then somehow shove that data into a regular Image() object. I believe we have successfully obtained the data in various forms (tried arraybuffer and blobs), but are not successful in jamming it into the Image() object.

For example:

```
var img3 = new Image();
var req = new window.XMLHttpRequest();
req.overrideMimeType('text/plain; charset=x-user-defined');  // seems to make no difference
req.responseType = 'arraybuffer';  // no joy with arraybuffer or blob
req.open("GET", textureUrl, true, "", "");  // async request allows CORS preflight exchange

req.onreadystatechange = function (oEvent) {
  if (req.readyState === 4) {
    if (req.status === 200) {
        alert( "XHR worked" );
        if( req.response ) {
          alert( "resp text: " + req.response );  // identifies response as arraybuffer or blob
        }

        // I believe this section is where I need the most help.

        // var base64Img = window.btoa(unescape(encodeURIComponent( req.responseText)) );

        var base64Img = window.btoa( unescape( encodeURIComponent( req.response ) ) );
        alert( "b64: " +  base64Img );  // vaguely uu64ish, but truncated
        var src = "";
        if( isPng == 1 ) {  // just to indicate the src url is built differently for jpg.
            alert("png");
            src = 'data:image/png;base64,' + base64Img;
        } 

        ....
        img3.src = src;  // img3 loads fine if I just jam a same domain url here

  <closing braces>

```

From what I have read, it isn't clear I need to override the mime type, if I specify arraybuffer, but it isn't clear to me.

I get data back (no cross-domain errors, yay), and it seems to be about the right size, but I am not convinced I am successfully uu64 encoding it, nor that I am jamming a suitable data url into the image.

Again, I only need this to work with the newest Chrome browser, and I would like to be as 'pure HTML5' as possible, so I don't feel the need to work with IE7, etc.

I don't know if req.response includes the first line of the HTTP response or not (i.e. is it my responsibility to trim something before uuencoding it...)

Hope you can pull the wool from my eyes!

Thanks in advance.