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

Quelles sont les différentes façons 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é.

Il existe d'autres moyens pour ce faire?

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

source d'informationauteur dchhetri

  1. 20

    La seule façon d'économiser est de l'exportation d'une image... que Vous avez déjà trouvé cette solution, et c'est le meilleur 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. Changer le type mime dans cette fonction:

        canvas.toDataURL("image/jpeg");

    Une autre manière d'enregistrer les données du canevas (en format PDF) est à l'aide de la wkhtmltopdf Bibliothèque

    Acclamations. Frank

    frankneff.ch /@frankneff

  2. 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 ces code du travail. Mais d'abord créer balise d'Ancrage dans la balise canvas, dont l'id est 'cropImageLink'. qu'après l'enregistrement. mais cela ne fonctionne pas dans le navigateur IE

  3. 1

    Vous pouvez utiliser le reimg bibliothèque pour faire cela très facilement.

    La conversion de la toile à une img :
    ReImg.fromCanvas(document.getElementById('yourCanvas')).toPng()

    Et le téléchargement de cette image pour l'utilisateur qui peut être fait comme ceci :
    ReImg.fromCanvas(document.getElementById('canvas')).downloadPng()

    À propos de donner au fichier un nom personnalisé, si vous regardez dans le code de la bibliothèque (qui est très court et simple à comprendre), vous trouverez que vous pouvez modifier le nom.

    Voici un lien vers la ligne spécifique: https://github.com/gillyb/reimg/blob/master/reimg.js#L56

  4. 1

    Solution qui ne nécessite pas de création d'un 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 pour le téléchargement, ou des déclencheurs que vous ne pouvez pas facilement de référence.