web-dev-qa-db-fra.com

Comment enregistrer l'image sur l'ordinateur local de l'utilisateur à l'aide de HTML2canvas

Je rend une capture d'écran en un clic avec HTML2canvas .4.1 et je souhaite enregistrer l'image sur l'ordinateur local de l'utilisateur. Comment cela peut-il être accompli? Veuillez noter que je suis un débutant, donc le code réel me sera le plus utile.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

<button id="save_image_locally">download img</button>

   <div id="imagesave">
      <img id='local_image' src='img1.jpg'>
   </div>

<script>

    $('#save_image_locally').click(function(){

            html2canvas($('#imagesave'), 
             {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png");
                    alert('This will currently open image in a new window called "data:". Instead I want to save to users local computer. Ideally as a jpg instead of png.');
                    window.open(img);
                }
             });
            });

</script>
html2canvas
20
TheGrayVacuum

REMARQUE: cette réponse date de 2015 et la bibliothèque a été mise à jour.
Consultez les réponses ci-dessous pour les implémentations actuelles.

Essayez ceci (notez que Safari ouvre l'image dans le même onglet au lieu de la télécharger; l'attribut de téléchargement n'est pas pris en charge dans Safari)

<script>

  $('#save_image_locally').click(function(){
    html2canvas($('#imagesave'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'somefilename.jpg';
        a.click();
      }
    });
  });

</script>
42
2pha

mise à jour 2018

Notez que dans les nouvelles versions de Html2Canvas le onrendered l'option est obsolète et remplacée par des promesses.

Pour pouvoir télécharger l'image sur l'ordinateur de l'utilisateur, vous pouvez utiliser quelque chose comme ceci:

Html

<html>
    <head></head>
    <body>
        <div id="boundary">
            <div class="content">
                <p>My content here</p>
            </div>
        </div>

        <button id="download">Download</button>

    </body>
</html>

Javascript

Basé sur Krzysztof réponse

document.getElementById("download").addEventListener("click", function() {

    html2canvas(document.querySelector('#boundary')).then(function(canvas) {

        console.log(canvas);
        saveAs(canvas.toDataURL(), 'file-name.png');
    });
});


function saveAs(uri, filename) {

    var link = document.createElement('a');

    if (typeof link.download === 'string') {

        link.href = uri;
        link.download = filename;

        //Firefox requires the link to be in the body
        document.body.appendChild(link);

        //simulate click
        link.click();

        //remove the link when done
        document.body.removeChild(link);

    } else {

        window.open(uri);

    }
}

Problème rencontré

En effet, j'ai pu télécharger l'image, mais elle était vierge ... la cause possible de cela (au moins dans mon cas) était que le contenu le wrapper ( id = "# limite" ) n'a pas de largeur ou de hauteur définie, donc spécifiant une hauteur et une largeur vers le wrapper de contenu ont fait l'astuce pour moi.

j'espère que cela t'aides

11
chebaby