Image - Load Image Base64 Using Canvas

When you pull images from another domain, that domain must not have CORS set, otherwise when you copy the image to the canvas, it taints the canvas and prevents the canvas from exporting any images out. This example pulls image from a domain that doesn't enable CORS

by black strings

HTML

<div id="main">
  
  <!--<img src='https://www.webkit.org/blog-files/acid3-100.png'>-->

</div>

CSS

div img{
    width:10%;
    //height: 619px;
    //width: 780px;
    //background-image: url(https://www.webkit.org/blog-files/acid3-100.png);
}​

JavaScript

// beware of tained canvas, won't be able to export image
// a way to go around this is to convert the image to base64
// and then convert it back into an image

$(document).ready(function(){
	/*
   var img = $('#main img');
   console.log(img[0]);
   
   var i = new Image();
   img.crossOrigin = 'Anonymous';
   i.addEventListener('load', function() {
   	alert('loaded');
   });
   i.src = img[0].src;
   $('#main').append(i);
   */
   
   var url = 'https://cdn.stocksnap.io/stocksnap-user-uploads/77877-1525192067458.jpg';
   var base64Img = convertImgToDataURLviaCanvas(url, 
   	function(base64Str){
   		var imgFromBase64 = new Image();
      imgFromBase64.addEventListener('load', function(){
      	$('#main').append(this);
      });
      imgFromBase64.src = base64Str;
   	}
   );
   
});

  
  /*var baseImg = new Image();
  baseImg.addEventListener('load', function(){
  	alert('base loaded');
  	//$('#con').append(baseImage);
  });
  baseImg.src = base64Img;
  */

// will often run into tainted canvas
function getBase64Image(img) {
	console.log('base 64 converting');
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL;//.replace(/^data:image\/(png|jpg);base64,/, "");
}

// will not run into tainted canvas issue
// output format can be blank
function convertImgToDataURLviaCanvas(url, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  // the onload seems to bypass corss origin issues
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
    canvas = null;
  };
  // to trigger the image to do its first load
 ...