HTML5-canvas, speichern Sie jpeg-blob und wiederherstellen auf Leinwand von blob

Habe ich eine Leinwand #mycanvas welche ein Bild enthält. Ich möchte ein blob aus, dass Bild, vorzugsweise als jpeg. Hier ist, wie erstelle ich den blob

document.getElementById('mycanvas').toDataURL("image/jpeg").replace(/^data:image\/(png|jpeg);base64,/, "")

Wie reproduziere ich das Bild von diesem blob, und zeigen Sie es in #mycanvas wieder?

Überprüfen Sie heraus die Antwort hier stackoverflow.com/questions/4773966/...
Danke, mein problem gelöst!
Darf ich vorschlagen, dass das Wort "blob" ist wohl ein wenig irreführend ? Wie auf der MDN den richtigen Weg zu konvertieren eine <canvas> Inhalt in eine Blob ist die Verwendung der .toBlob() Methode, nicht auf alle .toDataURL(). In der Tat Ihre Frage sollte wohl das HTML5 canvas-Element, speichern Sie jpeg - Daten-URL und wiederherstellen auf Leinwand von Daten-URL. Was denkst du ?
Eine data-URL ist eine base64-Darstellung des Bildes nicht ein Blob. Als danidemi hingewiesen. Siehe: developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/... und developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/...

InformationsquelleAutor Anton Gildebrand | 2013-08-24

3

Hier, wie ich mein problem gelöst
```
function blob2canvas(canvas,blob){
    var img = new Img;
    var ctx = canvas.getContext('2d');
    img.onload = function () {
        ctx.drawImage(img,0,0);
    }
    img.src = blob;
}
```
Dem blob war, erhielt beim Aufruf canvas.toDataURL("image/jpeg")
- Wie kann ich das Gegenteil tun? Holen Sie sich die blob aus canvas?
- @EnriMR document.getElementById('mycanvas').toDataURL("image/jpeg")
- ist nicht der richtige Weg, um zu konvertieren eine Leinwand in einen richtigen Blob toBlob() - Methode ?
- Antwort ist falsch und irreführend
- Dies ist nicht mehr korrekt, müssen Sie einen url aus dem blob - img.src = URL.createObjectURL(blob);
InformationsquelleAutor Anton Gildebrand

Antons Antwort funktioniert nicht mehr wie es ist. Sie müssen diese syntax jetzt.

function blob2canvas(canvas,blob){
    var img = new window.Image();
    img.addEventListener("load", function () {
        canvas.getContext("2d").drawImage(img, 0, 0);
    });
    img.setAttribute("src", blob);
}

InformationsquelleAutor Leonardo Max Almeida

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.