Konvertieren Sie das Bild von der URL in Base64

Lesezeit: 3 Minuten

im_chethi

Mit einer Bilddatei erhalte ich die URL eines Bildes, das an einen Webservice gesendet werden muss. Von dort 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"https://stackoverflow.com/"");

Wie konvertiere ich die Bild-URL in BASE64?

mögliches Duplikat von Wie können Sie eine Zeichenfolge in JavaScript in Base64 codieren?

– SC

4. März 2014 um 13:10 Uhr
Wenn Sie nur versuchen, die URL und nicht die Bilddaten zu codieren, finden Sie Ihre Antwort möglicherweise hier: stackoverflow.com/questions/246801/…

– SC

4. März 2014 um 13:11 Uhr

ˈvɔlə

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"));

Diese Methode erfordert das Canvas-Element, das ist perfekt unterstützt.

Die MDN-Referenz von HTMLCanvasElement.toDataURL().
Und der Beamte W3C-Dokumentation.

Dies funktioniert nicht, wenn Sie die erstellen und hinzufügen <img> in JS, glaube ich. Denn ich habe Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported..

– Rubinös

7. Januar 2016 um 11:20 Uhr
@Rubinous – Bitte beziehen Sie sich auf diese Frage. Ich glaube nicht, dass Ihr Problem/Ihre Ausnahme etwas mit meinem Code zu tun hat. Andernfalls fühlen Sie sich frei, mir das Gegenteil zu beweisen.

– ˈvɔlə

7. Januar 2016 um 13:45 Uhr
Dies ist die richtige Antwort auf die Frage von OP. Für mich wollte ich die tatsächlichen Ergebnisse von verwenden toDataURL in einem CSS background-image. Also, ich brauchen alle vorstehenden data:image/png;base64, Sachen, also habe ich den Wert von dataURL direkt zurückgegeben (ich brauchte den RegEx-Ersatz nicht). Vielen Dank!

– Die rote Erbse

2. Januar 2017 um 23:07 Uhr
Der Konvertierungsteil var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); Funktioniert auch super auf Angular.

– Sam

25. Mai 2018 um 6:15 Uhr
Sie müssen img.naturalWidth und img.naturalHeight verwenden, um verkleinerte Bilder zu verarbeiten

– Mehmet K

27. Juli 2018 um 11:13 Uhr

Blob ist eine schreckliche Art, mit Ihren Bildern umzugehen, da es “Screenshot” verwendet, um das Bild zu erstellen. Dies bedeutet, dass die Bildgröße von der Bildschirmauflösung des Benutzers abhängt

– DerCrazyProfessor

11. Februar 2018 um 18:17 Uhr
in meinem Fall mit Typoskript ist es console.log (myBase64); zeigt undefiniert an

– Anuj

10. Mai 2018 um 6:34 Uhr
@TheCrazyProfessor wie schlagen Sie vor, das Problem ohne einen Blob zu lösen? Danke!

– Absturz

17. März 2019 um 23:42 Uhr
Manchmal wird durch den CROS-Ursprungsanforderungsfehler ein Anruf mit HttpRequest zum Empfangen eines Bildes von der URL getätigt

– Mustafa Kunwa

17. Januar 2020 um 5:01 Uhr

Das ist in Ordnung, danke!

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 = function() {
      const base64data = reader.result;   
      resolve(base64data);
    }
  });
}

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

ˈvɔlə

let baseImage = new Image;
baseImage.setAttribute('crossOrigin', 'anonymous');
baseImage.src = your image url

var canvas = document.createElement("canvas");
  canvas.width = baseImage.width;
  canvas.height = baseImage.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(baseImage, 0, 0);
  var dataURL = canvas.toDataURL("image/png");

Zusätzliche Informationen zu „CORS-fähigen Bildern“: MDN-Dokumentation

Mandeep Singh

Dies ist Ihr HTML-

    <img id="imageid" src="">
    <canvas id="imgCanvas" />

Javascript sollte sein-

   var can = document.getElementById("imgCanvas");
   var img = document.getElementById("imageid");
   var ctx = can.getContext("2d");
   ctx.drawImage(img, 10, 10);
   var encodedBase = can.toDataURL();

‘encodedBase’ Enthält die Base64-Codierung des Bildes.

10105000cookie-checkKonvertieren Sie das Bild von der URL in Base64

#Abfrage #Javascript