diff --git a/index.html b/index.html index f9ed1c4dd47832dfe51a48001a844d48552b5930..134a290831a85324b553f259d6315378330538c4 100644 --- a/index.html +++ b/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> @@ -51,7 +53,8 @@ <div class="display_image" id="imageCanvas" style="display: none;"> <!-- invisible assets for canvas generation--> <div id="vignetteQrCode" style="display: none"> </div> - <img src="none" id="temp_image" style="display: none"></img> + <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,7 +115,10 @@ 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) { @@ -269,6 +276,15 @@ function createVignetteCanvas (qrCode, title, pubkey, infos, givenImage){ // center it vertically between image and the pubkey 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";