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

**apicultrice** · 09/04/2020, 18h02

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**apicultrice** · 09/04/2020, 20h57

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**NoSmoking** · 10/04/2020, 18h22

Bonjour,

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

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

**apicultrice** · 11/04/2020, 09h22

Apparemment il faut utiliser cette fonction:

Save and download a compressed JPEG image:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**NoSmoking** · 14/04/2020, 11h27

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="scripts/dom-to-image.js"></script>

**apicultrice** · 17/04/2020, 13h53

Je l'ai fait avec html2canvas
Merci pour votre aide

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

JavaScript

Discussions similaires

Partager

Partager