Canvas-Element in ein Bild herunterladen

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?

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.

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

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>

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

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();
}

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';

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]));
 }