Afficher champs texte sur une image à imprimer en pdf (jsPDF)

Bonjour,

Mon objectif est de remplir certaines données, telles que noms / date / lieu vers des champs sur une image (qui est un pliage à effectuer) pour ensuite le générer en pdf à imprimer en A4....

J'ai déjà commencé avec des champs input pour les mettre en forme (rotation, positionnement), cependant je ne sais pas comment les positionner sur une image (ou un pdf si c'est possible), le résultat doit être en A4 (donc le document existant cible ne peut pas être modifier en taille).....

Qui pourrait me conseiller, je vous situe mon niveau, très amateur, je réalise ce petit projet en dehors de mon travail pour un groupe d'échange de graine et plante, et c'est donc le pliage d'enveloppe que j'ai déjà réalisé, cependant comme nous avons bcp de plantes différentes, les noms changent souvent, afin d'éviter l'édition constante du fichiher d'origine, je voudrais donc mettre en place une petite app qui pourrait le faire via html/jscript,.... évidemment mon niveau est à la découverte de cet environnement qui ne m'est pas quotidien....

Me conseillez-vous de placer l'image (jpg) dans un "canvas" ? (je pense que cela permet d'éditer les textes sur image, mais est-ce que la fonction jspdf prendra en charge toute la page) et à quel moment / où mettre le script ? Puis-je passer d'une page "vierge" uniquement avec les champs input avec des données vers une autre page avec le positionnement des textes sur un canvas pour à ce moment opérer un "body onload = jspdf (impression en pdf)....

Je suis toute ouie :-)

Voici déjà une ébauche du travail accompli, mais je pense que je m'y prends mal (je pense que je ne comprends pas bien comment intégrer l'image (pliage) aux données introduites...) ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  	<title>Produire sa pochette de semence à imprimer en PDF !</title>
 
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  	
   	<script type="text/javascript" src="js/jspdf.min.js"></script> 
 
  </head>
  <body>
 
    <label for='name'>Nom :</label>
    <input type="text" id='name' /><br \>
    <label for='daterec'>Date récolte :</label>
    <input id='daterec' /><br \>
    <label for='origine'>Origine :</label>
    <input id='origine' /><br \>
    <label for='color'>Couleur :</label>
    <input id='color' /><br \>
    <br \>
 
    <br \>
    <button type="button">Production pochette PDF !</button>
 
<!-- <button id="maz" onclick=clear()>Effacer</button> -->
    <button id="pfuit" onclick="propre()">Tout effacer</button>
 
 
<script>
        $(document).ready(function(){
                $("button").click(function(){
                        var namex = $.trim($("#name").val());
                                if(namex != ""){
                                        // show alert dialog if value is not blank
                                        var doc = new jsPDF();
                                        /// doc.text("Enveloppe de " + namex,10,10);
                                        /// doc.save("Pochette.pdf");
                                        
  const nameInput = document.getElementById('name');
  const name = nameInput.value;
  const colorInput = document.getElementById('color');
  const color = colorInput.value;
  const daterecInput = document.getElementById('daterec');
  const daterec = daterecInput.value;
  const origineInput = document.getElementById('origine');
  const origine = origineInput.value;
 
  doc.text(115, 25, `Nom : ${name}`, null, -45);
  doc.text(113, 35, `Couleur : ${color}`, null, -45);
  doc.text(152, 88, `Origine : ${origine}`, null, -45);
  doc.text(113, 48, `Date réc/fin : ${daterec}`, null, -45);
  doc.save("Enveloppe"+namex+".pdf");
                                        
                                }
                                
                                else alert("Nom obligatoire !");
                });
        });
 
 
function propre() {
var elems = document.getElementsByTagName("input");
var l = elems.length;
for (var i = 0; i < l; ++i){
  elems[i].value="";
}
}
</script>
 
  </body>
</html>

et le gabarit de pliage en image avec les champs vides au format A4
Pièce jointe 598126