IE11/FF Cors Issue - objectUrl

by Joe Blow

HTML

<div>
<img id='svgImage' height="140" width="140" crossorigin='anonymous' alt='image'>
<canvas id="dest" width="100" height="100" alt='canvas'></canvas>
<!--<canvas id="dest" alt='canvas'></canvas>-->
<img id='copiedImage'>
</div>

JavaScript

var image2 = document.getElementById('svgImage');
image2.crossOrigin="anonymous";
var xhr = new XMLHttpRequest();
//xhr.withCredentials = true;
var destCanvas = document.getElementById('dest');
var url;
//url = "http://www.w3.org/TR/SVG/images/shapes/circle01.svg";
//url="https://croptasticimages.azurewebsites.net/images/mansize.svg";
url="https://raw.githack.com/RanzQ/svg-pixi-demo/master/bee.svg";
xhr.onload = function () {
console.log('image loaded');
    var objectUrl = URL.createObjectURL(this.response);
    image2.onload = function() {
      var context = document.getElementById('dest').getContext('2d', {preserveDrawingBuffer: true});
      destCanvas.height = image2.height;
      destCanvas.width = image2.width;
        setTimeout(function() {
          context.drawImage(image2, 0, 0, destCanvas.width, destCanvas.width);	
          console.log('getting image data');
          setTimeout(function() {
          var test = context.getImageData(0,0, destCanvas.width, destCanvas.height);
          var test2 =destCanvas.toDataURL('image/jpeg');
          console.log(test.data.length + ' : ' + test2.length);
          var copiedImage = document.getElementById('copiedImage');
          copiedImage.src = test2;
          console.log('sample pixels:' + test.data[0] + test.data[test.data.length-1]  );
          },100);
        },0);
      
   
     // URL.revokeObjectURL(objectUrl);
      
    }
    
    image2.src = objectUrl;
		    
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();
    

//image2.src="https://static.prvd.com/siteimages/stickers/bird2b.svg";
//image2.src='https://lh3.googleusercontent.com/-LAFgeyNL894/AAAAAAAAAAI/AAAAAAAAAAA/-CWBGs9xLXI/s96-c/photo.jpg'