CONVERT Image url to Base64

Question

Using an Image File, I am getting the url of an image, that needs be to send to a webservice. From there the image has to be saved locally on my system.

The code I am using:

var imagepath = $("#imageid").val();// from this getting the path of the selected image  that var st = imagepath.replace(data:image/png or jpg; base64"/""); 

How to convert the image url to BASE64?

Answer 1

HTML

<img id=imageid src=https://www.google.de/images/srpr/logo11w.png> 

JavaScript

function getBase64Image(img) {   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,/, ""); }  var base64 = getBase64Image(document.getElementById("imageid")); 

This method requires the canvas element, which is perfectly supported.

• The MDN reference of HTMLCanvasElement.toDataURL().
• And the official W3C documentation.