Téléchargement d'un élément Canvas dans une image

Question

Quelles sont les différentes manières d'enregistrer un objet canvas ?

Dans mes recherches, j'ai trouvé deux approches:

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

Une autre façon est de prendre un instantané.

Y a-t-il d'autres façons de le faire?

Est-il possible de personnaliser le nom du fichier de téléchargement ?

Answer 1

Solution qui ne nécessite AUCUN BOUTON :

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

Utile si vous avez d'autres déclencheurs à télécharger ou des déclencheurs que vous ne pouvez pas facilement référencer.

Answer 2

La seule façon de sauvegarder est d'exporter en tant qu'image... Vous avez déjà trouvé cette solution, et c'est la meilleure je pense ;)

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

Vous pouvez utiliser différents types d'images. Modifiez le type MIME dans cette fonction :

     canvas.toDataURL("image/jpeg");

Une autre façon d'enregistrer les données du canevas (dans un PDF) consiste à utiliser la bibliothèque wkhtmltopdf

À votre santé. Franc

frankneff.ch / @frankneff

Answer 3

Cette solution est meilleure :

 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>

Answer 4

Essayez quelque chose comme ça...

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

Answer 5

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

J'espère que ce code fonctionnera. Mais créez d'abord une balise d'ancrage dans la balise de canevas dont l'identifiant est 'cropImageLink'. qu'après vérification. mais cela ne fonctionne pas dans le navigateur IE