convert image to base64 using javascript

Question

 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?

missing semicolon? should be var url_to_be_converted = "http://www.google.com/image/sample"; — tillz
– tillz, Commented Jul 20, 2014 at 16:08
@tillz: semicolons are optional in JavaScript, though their omission can cause unexpected problems sometimes. — David Thomas
– David Thomas, Commented Jul 20, 2014 at 16:39

Khalid · Accepted Answer · 2014-07-20 16:33:43Z

1

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

answered Jul 20, 2014 at 16:33

Khalid

4,8285 gold badges29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

convert image to base64 using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related