Herunterladen Leinwand Bild mit toBlob

Ich bin versucht, laden Sie ein großes Leinwand-Bild (mehrere tausend Pixel in Höhe und Breite) auf der Klick auf eine Schaltfläche mit toBlob im folgenden code, die scheint nicht zu funktionieren:

document.getElementById("download_button").onclick = function() {

  var link = document.createElement("a");
  link.download = "image.png";

  canvas.toBlob(function(blob){
    link.href = URL.createObjectURL(blob);
    console.log(blob);
  },'image/png');

  console.log(link.href);
  link.click();

}

console.log(blob) in der callback-Funktion gibt: Blob {size: 64452, type: "image/png"}

Aber console.log(link.href) gibt nichts zurück.

Bin ich nicht mit .createObjectURL richtig?

Ich verwendet, um arbeiten mit toDataURL, aber es aufgehört zu arbeiten, die über eine gewisse Leinwandgröße. Und dieser Beitrag canvas.toDataURL() download-Größe begrenzen vorgeschlagen, um zu versuchen toBlob.

InformationsquelleAutor Bielorusse | 2017-06-15
  1. 10

    Dein code ist in Ordnung.. nur verwenden Sie es zur richtigen Zeit 🙂

     canvas.toBlob(function(blob){
    link.href = URL.createObjectURL(blob);
    console.log(blob);
    console.log(link.href); //this line should be here
  },'image/png');
    • Gut, danke ! Es funktioniert einwandfrei mit console.log(link.href); und link.click(); innerhalb der callback-Funktion.
    • warum ist, dass, obwohl? Ich dachte, dass wäre nur der Fall, wenn .href wurde eine benutzerdefinierte Eigenschaft Hinzugefügt wird, um das link-element aber war es nicht, doch das link-element definiert wurde, in der Ereignis-Funktion Umfang zu, so sollten Zugang zu oder ist es, weil es verschachtelt ist, die innerhalb einer anderen Funktion?
    • Ich habe nur versucht, ein bisschen etwas zu versuchen, es zu testen, und das ist, was ich bekomme: var link = document.createElement("a"); link.download = "image.png"; function test() { link.href = "#Test"; console.log(link.href); } Ergebnis: "Bild.png"
    • außerdem, mein Erster Gedanke ist, dass link.href sollten nicht zugänglich sein, die außerhalb der Funktion oder atleast, return "Bild.png" basierend auf dem oben beschriebenen Verhalten seltsam genug, noch link.href außerhalb der Funktionsumfang gibt eine leere Zeichenfolge.
    InformationsquelleAutor ymz
  2. 3

    Meine Lösung für das problem:

    async function getImage({
  canvas,
  width,
  height,
  mime = 'image/jpeg',
  quality = 0.8,
}) {
  return new Promise(resolve => {
    const tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = width;
    tmpCanvas.height = height;

    const ctx = tmpCanvas.getContext('2d');
    ctx.drawImage(
      canvas,
      0,
      0,
      canvas.width,
      canvas.height,
      0,
      0,
      width,
      height,
    );

    tmpCanvas.toBlob(resolve, mime, quality);
  });
}

const photo = await getImage({ canvas, width: 500, height: 500 });
    InformationsquelleAutor s.meijer
Schreibe einen Kommentar