Konvertieren Sie das Bild von der URL in Base64

Lesezeit: 3 Minuten

Benutzer-Avatar
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

Benutzer-Avatar
ˈ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.

  • 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)

Benutzer-Avatar
ˈ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

Benutzer-Avatar
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.

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

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy