CORS DataUri Src

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>
  <img id='copiedImage'> 
</div>

JavaScript

function createCORSRequest(method, url) {
        var xhr = new XMLHttpRequest();
        if ("withCredentials" in xhr) {
            xhr.open(method, url, true);
        } else if (typeof XDomainRequest != "undefined") {
            xhr = new XDomainRequest();
            xhr.open(method, url);
        } else {
            xhr = null;
        }
        return xhr;
 }
 
 var imageElement = document.getElementById('svgImage');
 imageElement.crossOrigin = "anonymous";
 var imageUrl;
 imageUrl="https://croptasticimages.azurewebsites.net/images/mansize.svg";
 
 imageElement.onload = function() {
 console.log('image loaded');
 	var destCanvas = document.getElementById('dest');
  var context = destCanvas.getContext('2d', {preserveDrawingBuffer: true});
      destCanvas.height = imageElement.height;
      destCanvas.width = imageElement.width;
        setTimeout(function() {
          context.drawImage(imageElement, 0, 0, destCanvas.width, destCanvas.width);	
          console.log('getting image data');
          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]  );
        },0);
 }
 
 var request = createCORSRequest("GET", imageUrl);
//request.setRequestHeader("Accept", "text/html"); 

if (request) {
  request.onload = function () {
  	imageElement.src = "data:image/svg+xml," + encodeURIComponent(request.responseText);
  }
  request.onerror = function (ex) {
    if (window.console && window.console.log)
      console.log('Error loading image: ' + imageUrl);
    throw ex;
  }
}

request.send();