Img-url zu dataurl mit JavaScript

Mit JavaScript, ich möchte konvertieren, ein img-tag wie diesem:

<img width="11" height="14" src="http://mysite/file.gif" alt="File Icon">

In ein mit einem dataurl wie diese:

<img width="11" height="14" src="data:image/gif;base64,R0lGODlhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsBtKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoThCKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7" alt="File Icon">

Ist das möglich?

mögliche Duplikate von " Bild in base64 mit javascript
Warum wollen Sie das tun?
Da jsPDF nur zu unterstützen scheint, die Bilder wie, die.
Ich glaube nicht, dass es ein Duplikat der Antwort, weil er das herunterladen der binären Daten aus dem server und die Umwandlung in Base64. Ich bin versucht, zu konvertieren, eine absolute url, base64, auf dem client ohne Download ein zweites mal, wenn möglich.
noch, das Frage-und-Antwort konvertiert einen string in Base64. Ich habe nicht einen string zu konvertieren, nur eine url. Die btoa() Funktion nicht akzeptiert eine url.

InformationsquelleAutor adam0101 | 2014-09-05

  1. 8

    Laden Sie zuerst das Bild in ein canvas -

    var canvas = document.createElement("canvas");
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 100, 100);
  }
}

    Stellen Sie sicher, aktualisieren Sie die context.drawImage(base_image, 100, 100); um Werte für Ihre Anwendung geeignet ist.

    Quelle: https://stackoverflow.com/a/6011402/3969707

    Dann konvertieren Sie die Leinwand zu Daten.

    var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); //PNG is the default

    Quelle: https://stackoverflow.com/a/15685877/3969707

    Danke! Dies funktioniert großartig, aber es stellt sich heraus, dass, wenn ich auch mit html2canvas jsPDF es kümmert sich um die Konvertierung der Bilder für mich!

    InformationsquelleAutor Drew Faubion

  2. 0

    Das ist wirklich nicht etwas, was möchten Sie vielleicht tun in JavaScript, wie es erforderlich das Bild analysiert werden, in JavaScript, das ist sehr langsam. Sie wäre das Bild geladen und dann setzen die Ausgabe der Funktion in den img tag, die nicht um Bandbreite zu sparen, verringern Sie Komplexität oder Verbesserung der Sicherheit.

    Ihre beste Wette ist, um dies zu tun server-Seite. Ich habe diese verwendet werden, um großen Erfolg in der Vergangenheit für die Erzeugung von Seiten, die müssen absolut keine verlinkten/verknüpften externen Ressourcen. Sie können für jsPDF, dann verwenden Sie rohes JavaScript oder jQuery, um die Daten eines Bildes zu übergeben, in der PDF-Erstellung.

    Wird dies überall arbeiten und sich nicht auf den Rückgriff auf canvas die nicht die volle Unterstützung für mobile browser.

    InformationsquelleAutor Liam

  3. 0

    Hier ist, wie man die data-url von einem Bild mit fetch:

    (async function() {
    let blob = await fetch("https://example.com/image.png").then(r => r.blob());
    let dataUrl = await new Promise(resolve => {
      let reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });
    //now do something with `dataUrl`
})();
    hi, aber es gibt mir Fehler r.blob ist nicht eine Funktion

    InformationsquelleAutor

Schreibe einen Kommentar