Télécharger et enregistrer un canvas HTML avec JavaScript

Téléchargement simple (sans extension)

var canvas = document.querySelector("#canvas-id").toDataURL("image/png").replace("image/png", "image/octet-stream");
/* Télécharge le fichier sans extension */
window.location.href = canvas;

Création de lien de téléchargement

var canvas = document.querySelector("#canvas-id").toDataURL("image/png");

/* Création de l'élément Anchor */
var a = document.createElement('a');

/* Nom du fichier */
a.download = "canvas.png";

/* Canvas à télécharger */
a.href = canvas;

/* Texte du lien */
var aTxt = document.createTextNode("Télécharger");  

/* Insertion du texte */
a.appendChild(aTxt); 

/* Création du lien */
document.body.appendChild(a); 

Fonction de téléchargement

function downloadCanvas(){

    var canvas = document.querySelector("#canvas-id").toDataURL("image/png");

    /* Création de l'élément Anchor */
    var a = document.createElement('a');

    /* Nom du fichier */
    a.download = "canvas.png";

    /* Canvas à télécharger */
    a.href = canvas;

    /* Clique sur le lien */
    a.click();

}

Commentaires