Canvas-Element in ein Bild herunterladen

Lesezeit: 4 Minuten

Canvas Element in ein Bild herunterladen
dchhetri

Welche verschiedenen Möglichkeiten gibt es, ein Canvas-Objekt zu speichern?

Bei meiner Recherche habe ich zwei Ansätze gefunden:

var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;

Eine andere Möglichkeit besteht darin, einen Schnappschuss zu machen.

Gibt es andere Möglichkeiten, dies zu tun?

Ist es möglich, den Download-Dateinamen anzupassen?

1647177907 675 Canvas Element in ein Bild herunterladen
Ulf Aslak

Lösung, die erfordert KEINE TASTE:

var download = function(){
  var link = document.createElement('a');
  link.download = 'filename.png';
  link.href = document.getElementById('canvas').toDataURL()
  link.click();
}

Nützlich, wenn Sie andere Trigger zum Herunterladen haben oder Trigger, auf die Sie nicht einfach verweisen können.

  • @TAHASULTANTEMURI kannst du genauer werden? Und falls Sie eine Lösung gefunden haben, teilen Sie sie mit.

    – Ulf Aslak

    21. Januar 2020 um 11:01 Uhr

  • Überprüfen Sie die Antwort, tatsächlich ist toDataURL aus Sicherheitsgründen nicht mehr wirksam, aber wenn Sie das Bild von der Leinwand herunterladen, die vom img-Tag importiert wurde, sollte dieses Tag ein crossorigin-Attribut haben, damit es funktioniert, siehe stackoverflow.com/questions/20424279/…

    – TAHA SULTAN TEMURI

    21. Januar 2020 um 11:21 Uhr


  • @TAHASULTANTEMURI danke! Können Sie überprüfen, ob die Implementierung der vorgeschlagenen Antwort (img.setAttribute(‘crossOrigin’, ‘anonymous’); img.src = url) funktioniert?

    – Ulf Aslak

    22. Januar 2020 um 11:40 Uhr

Die einzige Möglichkeit zum Speichern ist der Export als Bild … Sie haben diese Lösung bereits gefunden, und sie ist meiner Meinung nach die beste 😉

    var canvas = document.getElementById("mycanvas");
    var img    = canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');

Sie können verschiedene Bildtypen verwenden. Ändern Sie den Mimetyp in dieser Funktion:

    canvas.toDataURL("image/jpeg");

Eine andere Möglichkeit, Leinwanddaten (in einem PDF) zu speichern, ist die Verwendung von wkhtmltopdf-Bibliothek

Prost. Frank

frankneff.ch / @frankneff

  • Wenn ich document.write mache, würde es dann nicht einfach auf die Webseite schreiben? Oder würde das einen Download-Befehl ausgeben?

    – dchhetri

    14. November 2011 um 21:01 Uhr

  • Ja, es schreibt nur das Bild auf die Seite. Sie können das Herunterladen erzwingen, aber in diesem Fall benötigen Sie eine serverseitige Implementierung, die hier erklärt wird, oder googlen Sie „Herunterladen von Bildern erzwingen“.

    – frank_neff

    14. November 2011 um 21:18 Uhr

  • Um das Bild herunterzuladen, können Sie es in eine einfügen <a> Tag verwenden download Attribut (html5) : <a href="javascript:canvas.toDataURL('image/jpeg');" download="download" >Download as jpeg</a>

    – svassr

    10. Dezember 2013 um 7:52 Uhr


Canvas Element in ein Bild herunterladen
Humberto Molina Lopez

Diese Lösung ist besser:

function download() {
var download = document.getElementById("download");
var image = document.getElementById("myCanvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}
<a id="download" download="triangle.png">
<button type="button" onClick="download()">Download</button>
</a>
    
<canvas id="myCanvas" width="720" height="450">Your browser does not support Canvas.</canvas>

  • Können Sie erklären, warum das besser ist?

    – BBaysinger

    12. April 2018 um 22:48 Uhr

  • Ja, warum? Tut mir leid, ich kann es nicht bearbeiten! Die Warteschlange ist voll

    – Tiago Rangel de Sousa

    13. September 2021 um 16:00 Uhr

var c = document.getElementById("popup");
var link = document.getElementById('cropImageLink');
link.setAttribute('download', 'MintyPaper.png');
link.setAttribute('href', c.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();

Ich hoffe, dieser Code würde funktionieren. Erstellen Sie jedoch zuerst das Anchor-Tag im Canvas-Tag, dessen ID „cropImageLink“ lautet. als nach Prüfung. aber es funktioniert nicht im IE-Browser

Canvas Element in ein Bild herunterladen
ifelse.codes

Probieren Sie so etwas aus …

function downloadCanvasAsImage(){

    let canvasImage = document.getElementById('canvas').toDataURL('image/png');
    
    // this can be used to download any image from webpage to local disk
    let xhr = new XMLHttpRequest();
    xhr.responseType="blob";
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'image_name.png';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
      };
      xhr.open('GET', canvasImage); // This is to download the canvas Image
      xhr.send();
}

  • Was ist, wenn wir es in SVG konvertieren wollen? Bitte führen.

    – Ahsan Khurshid

    16. September 2021 um 8:00 Uhr

1647177909 113 Canvas Element in ein Bild herunterladen
Luis Lobo

Du kannst den … benutzen reimg Bibliothek, um dies ganz einfach zu tun.

Konvertieren der Leinwand in ein img :
ReImg.fromCanvas(document.getElementById('yourCanvas')).toPng()

Und das Herunterladen dieses Bildes für den Benutzer kann folgendermaßen erfolgen:
ReImg.fromCanvas(document.getElementById('canvas')).downloadPng()

Um der Datei einen benutzerdefinierten Namen zu geben, wenn Sie sich den Code der Bibliothek ansehen (d. h. sehr kurz und einfach zu verstehen) werden Sie feststellen, dass Sie den Namen ändern können.

Hier ist ein Link zu der konkreten Zeile: https://github.com/gillyb/reimg/blob/master/reimg.js#L63
filename = filename || 'image.png';

  • Was ist, wenn wir es in SVG konvertieren wollen? Bitte führen.

    – Ahsan Khurshid

    16. September 2021 um 8:00 Uhr

1647177910 491 Canvas Element in ein Bild herunterladen
TAHA SULTAN TEMURI

beziehen sich darauf und danke an @kaiido

Ich habe gerade die Callback-Methode geändert und es hat funktioniert, die dort erwähnte Callback-Methode hat bei mir nicht funktioniert

var callback = function(blob) {
var a = document.createElement('a');
var saveAs = $('input[name="group1"]:checked').val();


var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'Image.' + saveAs;
document.body.appendChild(link);
link.click();

};
 function dataURIToBlob(dataURI, callback) {
var binStr = atob(dataURI.split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);

 for (var i = 0; i < len; i++) {
  arr[i] = binStr.charCodeAt(i);
 }

   callback(new Blob([arr]));
 }

997860cookie-checkCanvas-Element in ein Bild herunterladen

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

Privacy policy