add the choice to display a Ğ1 logo.

index.html

@@ -43,6 +43,8 @@
 			<textarea type="textarea" rows="10" cols="29" id="infos" name="infos"></textarea></br>
 			<label title="Image JPG ou PNG. Le logo Ğ est utilisé par défaut." for="image">Image</label>
 			<input type="file" id="image" name="image" accept=".JPG, .JPEG, .jpg, .jpeg, .png, .PNG"></input></br>
+			<label title="Ajouter un logo Ğ" for="logo">Logo Ğ1</label>
+			<input type="checkbox" id="logo" name="is_logo"></input></br>
 			<input class="submit_button" type="submit" value="Générer !"></input>   
 		</fieldset></form>
     </section>
@@ -52,6 +54,7 @@
 		<!-- invisible assets for canvas generation-->
         <div id="vignetteQrCode" style="display: none"> </div>
         <img src="none" id="temp_image" style="display: none"></img>
+        <img src="./img/logo_g.png" id="logo_g_png" style="display: none"></img>
         <!-- buttons -->
         <div id="vignette_buttons">
 		  <a id="download" download="vignette.png"><button class="download" type="button" onClick="download()">Télécharger l'image</button></a>
@@ -82,6 +85,7 @@ const MARGIN_CANVAS = 50;
 
 const QR_WIDTH_AND_HEIGHT = 200;
 const IMAGE_WIDTH_AND_HEIGHT = 300;
+const LOGO_WIDTH_AND_HEIGHT = 150;
 const IMAGE_PLACEHOLDER = "./img/logo_g.png"
 
 const TITLE_FONT = "45px serif";
@@ -111,6 +115,9 @@ function createVignette(event) {
   let infos = document.forms["formulaire"]["infos"].value;
   let pubkey = document.forms["formulaire"]["pubkey"].value;
   let image = document.forms["formulaire"]["image"].files[0];
+  let isLogo = document.forms["formulaire"]["logo"].checked;  
+  
+  console.log(isLogo);
 
   if (! checkValues(title, infos, pubkey, image)) {
 	  return;
@@ -143,7 +150,7 @@ function createVignette(event) {
     reader.onload = function () {
       let tempImage = document.getElementById("temp_image")
       tempImage.onload = function () {
-	    vignetteCanvas = createVignetteCanvas( qrCode, title, pubkey, infos, tempImage);
+	    vignetteCanvas = createVignetteCanvas( qrCode, title, pubkey, infos, tempImage, isLogo);
    	  }
       tempImage.src = reader.result
     }
@@ -153,7 +160,7 @@ function createVignette(event) {
     let tempImage = document.getElementById("temp_image")
 	tempImage.src = IMAGE_PLACEHOLDER;  
 	tempImage.onload = function () {
-	    vignetteCanvas = createVignetteCanvas( qrCode, title, pubkey, infos, tempImage);
+	    vignetteCanvas = createVignetteCanvas( qrCode, title, pubkey, infos, tempImage, isLogo);
    	  }
   }
 	
@@ -231,7 +238,7 @@ function verifyFormat (pubkeyAndChecksum) {
     return true;
 }
 
-function createVignetteCanvas (qrCode, title, pubkey, infos, givenImage){
+function createVignetteCanvas (qrCode, title, pubkey, infos, givenImage, isLogo){
 
 	let canvas = document.getElementById("vignette_canvas");
 	if (canvas.getContext) {
@@ -270,6 +277,15 @@ function createVignetteCanvas (qrCode, title, pubkey, infos, givenImage){
       yPosQr = parseInt( MARGIN_CANVAS + IMAGE_WIDTH_AND_HEIGHT + ((CANVAS_HEIGHT - (2* MARGIN_CANVAS + IMAGE_WIDTH_AND_HEIGHT)) /2 - QR_WIDTH_AND_HEIGHT/2 ) )
       ctx.drawImage(imageQrCode, xPosQr, yPosQr );
 
+      // logo
+      if (isLogo === true ){
+		console.log ("coucou");
+		logo = document.getElementById("logo_g_png");
+		xLogo = alignTextOn - LOGO_WIDTH_AND_HEIGHT - MARGIN_CANVAS / 2
+		yLogo = parseInt (MARGIN_CANVAS + IMAGE_WIDTH_AND_HEIGHT - (LOGO_WIDTH_AND_HEIGHT + MARGIN_CANVAS) / 2 )
+		ctx.drawImage ( logo, xLogo, yLogo, LOGO_WIDTH_AND_HEIGHT, LOGO_WIDTH_AND_HEIGHT);
+	  }
+      
       // background
       ctx.globalCompositeOperation = "destination-over";
       ctx.fillStyle = "#FFFFFF";