web-dev-qa-db-fra.com

Générer une image d'un div et enregistrer sous

Je voudrais créer un bouton d'entrée "Enregistrer l'image" qui:

  1. prendre une capture d'écran d'un div
  2. demander à "Enregistrer sous" sur l'ordinateur de l'utilisateur

J'ai trouvé comment créer un écran de plongée en utilisant html2canvas et pour l'ouvrir dans un nouvel onglet, cela fonctionne parfaitement:

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
      }
    });
}

Mais pour toi, Enregistrer en tant que partie, est une sorte de partie difficile ... J'ai trouvé des sujets intéressants, comme je suis nouveau dans le codage JS (et objet), je suis un peu confus ... Je pense que je vais devoir utiliser FileSaver.js et créer un nouveau blob http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

Mais je ne sais pas comment implémenter les saveAs dans mon html2canvas, comment lancer correctement un nouveau blob ...

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);

            var blob = new Blob(img, {type: "image/jpeg"});
            var filesaver = saveAs(blob, "my image.png");
      }
    });
}

J'ai également essayé de faire quelque chose avec cela, en extrayant l'URL générée en base64, mais c'est trop compliqué pour moi de comprendre tout: http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

Mais quelqu'un me donne quelques conseils et m'aide s'il vous plait?

javascriptbase64blobhtml2canvasfilesaver.js
14
Jaggana

Voici le code final, s'il peut vous aider:

function PrintDiv(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL();
            downloadURI(myImage, "MaSimulation.png");
      }
    });
}

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();   
    //after creating link you should delete dynamic link
    //clearDynamicLink(link); 
}
6
Jaggana

Vous pouvez faire cette approche:

    //Creating dynamic link that automatically click
    function downloadURI(uri, name) {
        var link = document.createElement("a");
        link.download = name;
        link.href = uri;
        link.click();
        //after creating link you should delete dynamic link
        //clearDynamicLink(link); 
    }

    //Your modified code.
    function printToFile(div) {
        html2canvas(div, {
            onrendered: function (canvas) {
                var myImage = canvas.toDataURL("image/png");
                //create your own dialog with warning before saving file
                //beforeDownloadReadMessage();
                //Then download file
                downloadURI("data:" + myImage, "yourImage.png");
            }
        });
    }
9
Paweł Głowacz

Cela fonctionne bien pour moi.

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    clearDynamicLink(link); 
}

function DownloadAsImage() {
    var element = $("#table-card")[0];
    html2canvas(element).then(function (canvas) {
        var myImage = canvas.toDataURL();
        downloadURI(myImage, "cartao-virtual.png");
    });
}
1
Leandro Costa

Avez-vous regardé

http://eligrey.com/demos/FileSaver.js/

On dirait qu'il fait ce dont vous avez besoin

1
Matt Bryson