CONVERT图像URL到Base64

Question

使用图像文件,我得到一个图像的URL,需要发送到Web服务.从那里,图像必须在我的系统上本地保存.

我正在使用的代码:

var imagepath = $("#imageid").val();// from this getting the path of the selected image

that var st = imagepath.replace(data:image/png or jpg; base64"/"");

如何将图像URL转换为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"));

此方法需要canvas元素,它是完美支持的.

• MDN的参考资料HTMLCanvasElement.toDataURL().
• 和官方的W3C文档.

Answer 2

查看此答案:@HaNdTriX的/sf/answers/1419953741/

基本上,他实现了这个功能:

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

在您的情况下,您可以像这样使用它:

toDataUrl(imagepath, function(myBase64) {
    console.log(myBase64); // myBase64 is the base64 string
});

Answer 3

在今天的 JavaScript 中，这也适用。

const getBase64FromUrl = async (url) => {
  const data = await fetch(url);
  const blob = await data.blob();
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = () => {
      const base64data = reader.result;   
      resolve(base64data);
    }
  });
}

getBase64FromUrl('https://lh3.googleusercontent.com/i7cTyGnCwLIJhT1t2YpLW-zHt8ZKalgQiqfrYnZQl975-ygD_0mOXaYZMzekfKW_ydHRutDbNzeqpWoLkFR4Yx2Z2bgNj2XskKJrfw8').then(console.log)