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

<pre>
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.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>

</pre>

req.reponseType = 'arraybuffer';

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