Website-Suche

javascript - Bild von URL in Base64 umwandeln

Mit einer Bilddatei erhalte ich die URL eines Bildes, die an einen Webservice gesendet werden muss. Von dort aus muss das Bild lokal auf meinem System gespeichert werden.

Der Code, den ich verwende:

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

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

Wie konvertiert man die Bild-URL in BASE64?

Antwort #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\/?[A-z]*;base64,/);
}

var base64 = getBase64Image(document.getElementById("imageid"));

Besonderer Dank an @Md. Hasan Mahmud für die Bereitstellung eines verbesserten Regex, das mit jedem Bild-Mime-Typ in meinen Kommentaren funktioniert!

Diese Methode erfordert das Canvas-Element, das vollständig unterstützt wird.

  • Die MDN-Referenz von HTMLCanvasElement.toDataURL().
  • Und die offizielle W3C-Dokumentation.

Antwort #2

Sieh dir diese Antwort an: https://stackoverflow.com/a/20285053/5065874 von @HaNdTriX

Im Grunde hat er diese Funktion implementiert:

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();
}

Und in deinem Fall kannst du es so verwenden:

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

Antwort #3

In dem heutigen JavaScript wird dies ebenfalls funktionieren..

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

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

Verwandte Artikel