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";