js blob to image code example

Example 1: javascript create blob or data/image from image url

function convertImgToBase64URL(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}
convertImgToBase64URL('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png', function(base64Img){
alert('it works');
      $('.output').find('img').attr('src', base64Img);  
   
});


//function convertImgToBase64URL will convert the image into data url

Example 2: javascript blob to image

// GET BLOB FROM XML REQUEST (JAVASCRIPT)
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();
// MAKE A RESPONSE FUNCTION (JAVASCRIPT)
function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   document.querySelector("#image").src = imageUrl;
}
// MAKE OUTPUT IMG (IN HTML)
<img id="image"/>
  // THIS IS OPEN SOURCE I DO NOT OWN THIS //

Example 3: show image with blob javascript

ConvertImgToBase64URL