Changer dynamiquement la couleur fond et/ou encre d'un QRC

**ProgElecT** · 19/07/2023, 12h18

Salut

J'utilise le générateur de QRC qrcode.min.js
Pour des raisons personnel dût à instabilité de ma connexion internet, je me suis fait un petit HTML pour générer le QRC sans avoir besoin de connexion.
Le code

Code html :

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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Créer et personnaliser un QR Code</title>
		<!-- <script src="qrcode.js"></script> --> <!-- en local -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
	</head>
	<style>
                #InputQRC{
                        position:relative;
                        width:304px
                }
                /* new QRCode engendre une image qui contient le QRC */
                img{
                        /* background-color: white; */
                        padding: 3px;
                        border-radius: 5px;
                        border: 2px solid black;
                }
        </style>
	<body>
		<input type="color" id="FondColor" name="FondColor" value="#ffffff" onchange="ActuColor()">
		<label for="FondColor">Couleur de fond:</label>
		<br>
		<input type="color" id="EncreColor" name="EncreColor" value="#000000" onchange="ActuColor()">
		<label for="EncreColor">Couleur de l'encre:</label>
		<br>
		<input type="text" id="InputQRC" placeholder="Entrez votre Url ou votre texte (mini 3 caractères)" onkeyup="ActuText(this.value)" onfocus="PrendFocus(this)" onblur="PerdFocus(this)">
		<br>
		<br>
		<div id="CtnQRC"></div>
		<script>
                        const href = "https://contrib-vb.developpez.com/ProgElecT/RadioAmateurs/Radio%20version5/Radio74.php";
                        const size = 300;
                        let ClF = "#ffffff";
                        let ClE = "#000000";
                        let CodeQR;
 
                        CodeQR = new QRCode(document.querySelector("#CtnQRC"), {
                                text: href,
                                width: size,
                                height: size,
                                colorDark: ClF,
                                colorLight: ClE,
                                correctLevel : QRCode.CorrectLevel.H
                        });
 
                        function ActuText(texte) {
                                if (texte < 3) {return;};
                                ClF = document.getElementById("FondColor").value;
                                ClE = document.getElementById("EncreColor").value;
                                if (CodeQR == null) {
                                        CodeQR = generateQrCode(texte);
                                        console.log("generateQrCode");
                                        } else {
                                        CodeQR.makeCode(texte);
                                        console.log("makeCode");
                                }
                        } 
                        function generateQrCode(qrContent) {
                                return CodeQR = new QRCode("qr-code",
                                        {
                                                width: 256,
                                                height: 256,
                                                colorDark: ClF,
                                                colorLight: ClE,
                                                correctLevel: QRCode.CorrectLevel.H,
                                                text: qrContent,
                                        }
                                );
                        }
                        function ActuColor() {
                                texte = document.getElementById("InputQRC").value;
                                //if (texte < 3) {return;};
                                ClF = document.getElementById("FondColor").value;
                                ClE = document.getElementById("EncreColor").value;
                                CodeQR.colorDark=ClF;
                                CodeQR.colorLight=ClE;
                                //CodeQR.makeCode(texte);
                                console.log("ActuColor          ClF = "+ClF+"    ClE = "+ClE);
                        } 
                        //====================================================================
                        function PrendFocus(el) {el.style.backgroundColor = "#ccffcc";return;}
                        //---------------------------------------------------------
                        function PerdFocus(el) {el.style.backgroundColor = "White";return;}
                        //---------------------------------------------------------
                </script>
 
	</body>
</html>

Malheureusement je ne parviens pas à modifier soit la couleur de fond soit la couleur de l'encre du QRC dynamiquement.
Je peux choisir ses couleurs lors du chargement mais pas dynamiquement dans la fonction ActuColor ligne 74.

Merci de votre aide.

**mathieu** · 19/07/2023, 15h04

le qrcode est dessiné dans un canevas donc je pense qu'à chaque changement de couleur il faut rappeler le code complet de création du qrcode pour qu'il écrase le précédent.

**ASCIIDEFOND** · 19/07/2023, 16h48

Salut ProgElecT,

Ce QRcode est image encodé en base64. Comme le soulignait mathieu, il faut le redessiner pour changer les couleurs.

Code HTML :

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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Créer et personnaliser un QR Code</title>
  <!-- <script src="qrcode.js"></script> --> <!-- en local -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<style>
  #InputQRC {
    position: relative;
    width: 304px
  }
 
  /* new QRCode engendre une image qui contient le QRC */
  img {
    /* background-color: white; */
    padding: 3px;
    border-radius: 5px;
    border: 2px solid black;
  }
</style>
 
<body>
  <input type="color" id="FondColor" name="FondColor" value="#ffffff" onchange="ActuColor()">
  <label for="FondColor">Couleur de fond:</label>
  <br>
  <input type="color" id="EncreColor" name="EncreColor" value="#000000" onchange="ActuColor()">
  <label for="EncreColor">Couleur de l'encre:</label>
  <br>
  <input type="text" id="InputQRC" placeholder="Entrez votre Url ou votre texte (mini 3 caractères)"
    onchange="ActuColor()">
  <br>
  <br>
  <div id="CtnQRC"></div>
  <script>
 
    var inputAdresse = document.getElementById('InputQRC')
    let ClF = "#ffffff";
    let ClE = "#000000";
    let CodeQR;
 
    inputAdresse.value = "https://contrib-vb.developpez.com/ProgElecT/RadioAmateurs/Radio%20version5/Radio74.php";
 
    CodeQR = new QRCode(document.querySelector("#CtnQRC"), {
      text: inputAdresse.value,
      correctLevel: QRCode.CorrectLevel.H
    });
 
    ActuColor()
 
    function ActuText(texte) {
      if (texte < 3) { return; };
 
      if (CodeQR == null) {
        CodeQR = generateQrCode(texte);
        console.log("generateQrCode");
      } else {
        CodeQR.makeCode(texte);
        console.log("makeCode");
      }
    }
 
    function generateQrCode(qrContent) {
      return CodeQR = new QRCode("qr-code",
        {
          text: qrContent,
          correctLevel: QRCode.CorrectLevel.H
        }
      );
    }
    function ActuColor() {
      texte = document.getElementById("InputQRC").value;
      CodeQR._htOption.colorDark = document.getElementById("FondColor").value;
      CodeQR._htOption.colorLight = document.getElementById("EncreColor").value;
      ActuText(inputAdresse.value)
 
    }
  </script>
 
</body>
 
</html>

**ProgElecT** · 19/07/2023, 17h58

Merci à vous deux, mathieu et ASCIIDEFOND ainsi qu'à la centaine de personnes qui ont dût lire ma demande d'aide.

ASCIIDEFOND, ta proposition fonctionne correctement comme j'en avais besoin.

Changer dynamiquement la couleur fond et/ou encre d'un QRC

JavaScript

Vue hybride

Discussions similaires

Partager

Partager