Créer un fichier jpg avec le contenu d'un DIV

Version imprimable

Bonjour,

J'ai un petit problème à résoudre et qui me donne du "fils à retordre"
Actuellement j'ai créé un bouton pour imprimer le contenu d'un DIV qui est en fait une image qu j'imprime en PDF
Je voudrais sauvegarder ce contenu dans un fichier JPG à chaque fois que je quitte cette page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
// imprimer
      var Printer=new Object();
      Printer.print=function (HTML) { 
        var win = window.open(location,null,null)
        win.blur(); window.focus(); 
        win.document.title="Apercu de l'impression en cours";
        win.document.write("<html><head><title>"+document.title+"</title></head><body>" + HTML +"</body></html>")
        win.print();
        win.close();
      }
      window.top.Printer=Printer;
      // Utilisation, partout dans toutes les frames, iframes, page mère, etc // window.top.Printer.print('Image selectionnée :<br /><img src="img01.gif" />')
      function Imprimer() {
        Printer.print(document.getElementById('implant').innerHTML);
      }

Code:

1
2
3
4
5
 
<a onClick="Imprimer()" class="bouton-relief">Imprimer implantation</a>
<div id="implant">  
..................
</div>

Cela fonctionne très bien mais cela reste manuel et en PDF
Qui a une idée ?
A+

Code:

1 2 3 4 5 6 7 8 9 10 11 // imprimer var Printer=new Object(); Printer.print=function (HTML) { var win = window.open(location,null,null) win.blur(); window.focus(); win.document.title="Apercu de l'impression en cours"; win.document.write("<html><head><title>"+document.title+"</title></head><body>" + HTML +"</body></html>") win.print(); win.close(); }
Il faut certainement remplacer win.print(); par une autre fonction....

win.document.write() crée une nouvelle page avec le contenu de la balise DIV
ensuite
win.print(); imprime la nouvelle page

Comment créer une photo de la page créée ?
A+

10/04/2020, 18h22
NoSmoking

Bonjour,

Citation:

Comment créer une photo de la page créée ?

j'étais tombé sur : dom-to-image qui avait l'air pas mal !

Apparemment il faut utiliser cette fonction:

Save and download a compressed JPEG image:

Code:

1
2
3
4
5
6
7
8
 
domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

Par contre pour l'installation des biblio, je suis un peu perdue..
a+

14/04/2020, 11h27
NoSmoking

Citation:

Par contre pour l'installation des biblio, je suis un peu perdue..

c'est du standard !!!!

par exemple en rapatriant sur ton poste le script :

Code:

<script src="scripts/dom-to-image.js"></script>
17/04/2020, 13h53
apicultrice

Je l'ai fait avec html2canvas
Merci pour votre aide