image url to blob javascript

fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') .then(res => res.blob()) // Gets the response and returns it as a blob .then(blob => { // Here's where you get access to the blob // And you can use it for whatever you want // Like calling ref().put(blob) // Here, I use it to make an image appear on the page let objectURL = URL.createObjectURL(blob); let myImage = new Image(); myImage.src = objectURL; document.getElementById('myImg').appendChild(myImage) });

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

Posted by: Guest on September-21-2020

Code answers related to "image url to blob javascript"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "image url to blob javascript"

Code answers related to "image url to blob javascript"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us