CODEWITHSUNDEEP
javascripthtmlcanvas
user3858217
user3858217

Reputation: 13

convert image to base64 using javascript

 function convertImgToBase64(url){

  var canvas = document.createElement('CANVAS');
  var ctx = canvas.getContext('2d');
  var img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
      ctx.drawImage(img,0,0);
      var dataURL = canvas.toDataURL('image/png',"");
      alert(dataURL);

      canvas = null; 
  };
  img.src = url;



}

var url_to_be_converted = "http://www.google.com/image/sample"
convertImgToBase64(url_to_be_converted);

Alert(dataURL) does not showing any result.No pop up is generated there? How to solve this?
What wrong there?

Upvotes: 0

Views: 645

Answers (1)

Khalid
Khalid

Reputation: 4798

There is a cross origin problem ... try using this function 

function convertImgToBase64(url)
{
    var canvas = document.createElement('CANVAS');
    img = document.createElement('img'),
    img.src = url;
    img.onload = function()
    {
        canvas.height = img.height;
        canvas.width = img.width;
        var dataURL = canvas.toDataURL('image/png');
        alert(dataURL);
        canvas = null; 
    };
}

I removed the context and I loaded the image in a different way

Upvotes: 1

Related Questions