From 0e59e894828a8a0cb5a959b2fc955498fcf522a9 Mon Sep 17 00:00:00 2001
From: David Werth <werth.david@gmail.com>
Date: Mon, 3 Jun 2024 09:27:01 +0200
Subject: [PATCH] #94 added clear image option to "cut out" parts of the
 qr-code and add an image

---
 README.md                                     |  14 ++++++++----
 docs/clearimage.png                           | Bin 0 -> 14032 bytes
 package.json                                  |   2 +-
 projects/ngx-kjua/package.json                |   2 +-
 projects/ngx-kjua/src/lib/kjua/index.d.ts     |   2 +-
 .../src/lib/kjua/lib/create_canvas_qrcode.ts  |  17 ++++++++++++++-
 .../src/lib/kjua/lib/create_svg_qrcode.ts     |  20 ++++++++++++++++++
 .../ngx-kjua/src/lib/kjua/lib/draw_mode.ts    |   7 ++++++
 .../ngx-kjua/src/lib/ngx-kjua.interface.ts    |   1 +
 src/app/app.component.html                    |   3 ++-
 src/app/app.component.ts                      |   2 +-
 11 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 docs/clearimage.png

diff --git a/README.md b/README.md
index c00c09c..43bb38c 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,6 @@
 [![NPM version](https://img.shields.io/npm/v/ngx-kjua.svg?&label=npm)](https://www.npmjs.com/package/ngx-kjua) 
-[![Dependency Status](https://david-dm.org/werthdavid/ngx-kjua.svg)](https://david-dm.org/werthdavid/ngx-kjua)
 [![Downloads](https://img.shields.io/npm/dm/ngx-kjua.svg)](https://npmjs.org/package/ngx-kjua)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com) 
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/2ef6c180329a44cc9fd95abc77fc8c1d)](https://www.codacy.com/app/werthdavid/ngx-kjua?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=werthdavid/ngx-kjua&amp;utm_campaign=Badge_Grade)
 <img align="right" src="https://raw.githubusercontent.com/werthdavid/ngx-kjua/master/docs/readme-logo.png"/>
 
 If you find my work useful you can buy me a coffee, I am very thankful for your support. 
@@ -110,6 +108,8 @@ Once the package is imported, you can use it in your Angular application:
 
 ## Options
 
+:exclamation: *Caution*: When adding images, label or similar, this will reduce the readability of the QR-code. Consider using a higher error correction level (e.g. L) in those cases.
+
 ### Crisp
 
 As you can set the size of the image, the amount of 'modules' (black/white boxes that make up the QR-code) is calculated based on the size and the amount of `quiet` modules. The calculation can result in an odd number so that a module is e.g. 4.5 pixels big. The resulting image will be drawn fuzzy if `crisp` is set to false. Setting it to `true` will result in 'sharp' lines.
@@ -131,7 +131,13 @@ This can reduce the readability of the code!
 ### Image as Code
 <img src="https://raw.githubusercontent.com/werthdavid/kjua/master/docs/image-as-code.png"/>
 
-### Labelimage and Imagelabel
+### Clear + Image
+<img src="https://raw.githubusercontent.com/werthdavid/ngx-kjua/master/docs/clearimage.png"/>
+
+This mode let's you "cut out" parts of the QR-code and at the same time add an image.
+
+
+### labelimage, imagelabel and clearimage
 Use this, if you want a label AND an image. In these modes `mSize`, `mPosX` and `mPosY` can be provided as an array.
 In mode `labelimage`, the first value (index 0) of the `mSize`, `mPosX` and `mPosY` arrays is used for the label,
 the second value (index 1) is used for image and vice versa. Also in `labelimage` mode, the label is drawn before the 
@@ -149,7 +155,7 @@ image is drawn and therefore kinda "in the background" if the two overlap.
 * `back` background color (defaults to `#fff`, for transparent use `''` or `null`)
 * `rounded` roundend corners in pc: 0..100 (defaults to `0`, not working if `render`is set to `svg`)
 * `quiet` quiet zone in modules (defaults to `0`)
-* `mode` modes: 'plain', 'label' or 'image' (defaults to `plain`, set `label` or `image` property if you change this)
+* `mode` modes: 'plain', 'label', 'image' or 'clear' (defaults to `plain`, set `label` or `image` property if you change this)
 * `mSize` label/image size in pc: 0..100 (defaults to `30`)
 * `mPosX` label/image pos x in pc: 0..100 (defaults to `50`)
 * `mPosY` label/image pos y in pc: 0..100 (defaults to `50`)
diff --git a/docs/clearimage.png b/docs/clearimage.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8ca4491dd525dfc5a4a6f5f403ec7298bf2a431
GIT binary patch
literal 14032
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
DwU9+C

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index 7a2df18..1cd02c0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ngx-kjua-library",
   "description": "ngx-kjua library builder",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
diff --git a/projects/ngx-kjua/package.json b/projects/ngx-kjua/package.json
index f419654..40f5684 100644
--- a/projects/ngx-kjua/package.json
+++ b/projects/ngx-kjua/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ngx-kjua",
   "description": "Angular QR-Code generator component.",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "license": "MIT",
   "private": false,
   "repository": {
diff --git a/projects/ngx-kjua/src/lib/kjua/index.d.ts b/projects/ngx-kjua/src/lib/kjua/index.d.ts
index 09a0b92..4082f0e 100644
--- a/projects/ngx-kjua/src/lib/kjua/index.d.ts
+++ b/projects/ngx-kjua/src/lib/kjua/index.d.ts
@@ -57,7 +57,7 @@ export interface KjuaOptions {
   /**
    * modes: 'plain', 'label', 'image', 'imagelabel' or 'labelimage'
    */
-  mode?: "plain" | "label" | "image" | "imagelabel" | "labelimage";
+  mode?: "plain" | "label" | "image" | "imagelabel" | "labelimage" | "clearimage";
 
   /**
    * label/image size and pos in pc: 0..100
diff --git a/projects/ngx-kjua/src/lib/kjua/lib/create_canvas_qrcode.ts b/projects/ngx-kjua/src/lib/kjua/lib/create_canvas_qrcode.ts
index dca2e15..872cdb2 100644
--- a/projects/ngx-kjua/src/lib/kjua/lib/create_canvas_qrcode.ts
+++ b/projects/ngx-kjua/src/lib/kjua/lib/create_canvas_qrcode.ts
@@ -55,7 +55,10 @@ export const draw_modules = (qr: any, ctx: any, settings: any) => {
 const draw = (qr: any, ctx: any, settings: any) => {
   draw_background(ctx, settings);
   draw_modules(qr, ctx, settings);
-  draw_mode(ctx, settings);
+  if (settings.mode !== "clearimage") {
+    // we do this later manually
+    draw_mode(ctx, settings);
+  }
 };
 
 export const create_canvas_qrcode = (qr: any, settings: any, as_image: any) => {
@@ -81,5 +84,17 @@ export const create_canvas_qrcode = (qr: any, settings: any, as_image: any) => {
 
   context.scale(ratio, ratio);
   draw(qr, context, settings);
+  if (settings.mode === "clearimage") {
+    // draw_modules(qr, ctx2, settings);
+    const imagePos = dom.calc_image_pos(settings);
+    context.globalCompositeOperation = "destination-out";
+    context.fillStyle = "deeppink"; // any color works
+    context.fillRect(imagePos.x,
+      imagePos.y,
+      imagePos.iw,
+      imagePos.ih);
+    context.globalCompositeOperation = "source-over";
+    draw_mode(context, settings);
+  }
   return as_image ? dom.canvas_to_img(canvas, settings.elementId) : canvas;
 };
diff --git a/projects/ngx-kjua/src/lib/kjua/lib/create_svg_qrcode.ts b/projects/ngx-kjua/src/lib/kjua/lib/create_svg_qrcode.ts
index b3c3846..2b14b64 100644
--- a/projects/ngx-kjua/src/lib/kjua/lib/create_svg_qrcode.ts
+++ b/projects/ngx-kjua/src/lib/kjua/lib/create_svg_qrcode.ts
@@ -330,6 +330,19 @@ export const create_svg_qrcode = (qr: any, settings: any) => {
         image: get_attr(settings.image, "src"),
       });
     }
+
+    if (settings.mode === "clearimage") {
+      const ratio = settings.ratio || dpr;
+      const canvas = create_canvas(settings.size, ratio);
+      const ctx2 = canvas.getContext("2d");
+      const imagePos = calc_image_pos(settings);
+      ctx2.globalCompositeOperation = "destination-in";
+      ctx2.fillStyle = "deeppink";
+      ctx2.fillRect(imagePos.x,
+        imagePos.y,
+        imagePos.iw,
+        imagePos.ih)
+    }
   }
   if (mode === "label") {
     add_label(svg_el, settings);
@@ -341,6 +354,13 @@ export const create_svg_qrcode = (qr: any, settings: any) => {
   } else if (mode === "imagelabel") {
     add_image(svg_el, settings);
     add_label(svg_el, settings);
+  } else if (mode === "clearimage") {
+    // We set the mode to "labelimage" here. this will change to behavior of calc_image_pos() to use
+    // the arrayposition 1 (that means, the second position in the pos-array is used for drawing the image.
+    // the first position in the pos-array is used for clearing the background via "destination-out").
+    // We can't just change the calc_image_pos() to use arrayposition 1 in the case of clearimage as we
+    // call this function as well to calculate the area to be cleared
+    add_image(svg_el, {...settings, mode: "labelimage"});
   }
 
   return svg_el;
diff --git a/projects/ngx-kjua/src/lib/kjua/lib/draw_mode.ts b/projects/ngx-kjua/src/lib/kjua/lib/draw_mode.ts
index f0f7c98..d6b7eb7 100644
--- a/projects/ngx-kjua/src/lib/kjua/lib/draw_mode.ts
+++ b/projects/ngx-kjua/src/lib/kjua/lib/draw_mode.ts
@@ -65,5 +65,12 @@ export const draw_mode = (ctx: any, settings: any) => {
   } else if (mode === "imagelabel") {
     draw_image(ctx, settings);
     draw_label(ctx, settings);
+  } else if (mode === "clearimage") {
+    // We set the mode to "labelimage" here. this will change to behavior of calc_image_pos() to use
+    // the arrayposition 1 (that means, the second position in the pos-array is used for drawing the image.
+    // the first position in the pos-array is used for clearing the background via "destination-out").
+    // We can't just change the calc_image_pos() to use arrayposition 1 in the case of clearimage as we
+    // call this function as well to calculate the area to be cleared
+    draw_image(ctx, {...settings, mode: "labelimage"});
   }
 };
diff --git a/projects/ngx-kjua/src/lib/ngx-kjua.interface.ts b/projects/ngx-kjua/src/lib/ngx-kjua.interface.ts
index 57d3074..401bbd3 100644
--- a/projects/ngx-kjua/src/lib/ngx-kjua.interface.ts
+++ b/projects/ngx-kjua/src/lib/ngx-kjua.interface.ts
@@ -5,4 +5,5 @@ export type KjuaMode =
   | "label"
   | "image"
   | "imagelabel"
+  | "clearimage"
   | "labelimage";
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 05d3582..9cd75f6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -71,13 +71,14 @@
   <option value="image">image</option>
   <option value="imagelabel">imagelabel</option>
   <option value="labelimage">labelimage</option>
+  <option value="clearimage">clearimage</option>
 </select>
   <hr>
   <label for="msize">SIZE: {{mSize}}%</label><input id="msize" type="range" value="30" min="0" max="100" step="1" [(ngModel)]="mSize">
   <label for="mposx">POS X: {{mPosX}}%</label><input id="mposx" type="range" value="50" min="0" max="100" step="1" [(ngModel)]="mPosX">
   <label for="mposy">POS Y: {{mPosY}}%</label><input id="mposy" type="range" value="50" min="0" max="100" step="1" [(ngModel)]="mPosY">
   <hr>
-  <div *ngIf="mode === 'labelimage' || mode === 'imagelabel'">
+  <div *ngIf="mode === 'labelimage' || mode === 'imagelabel' || mode === 'clearimage'">
     <label for="msize2">SIZE2: {{mSize2}}%</label><input id="msize2" type="range" value="30" min="0" max="100" step="1" [(ngModel)]="mSize2">
     <label for="mposx2">POS X2: {{mPosX2}}%</label><input id="mposx2" type="range" value="50" min="0" max="100" step="1" [(ngModel)]="mPosX2">
     <label for="mposy2">POS Y2: {{mPosY2}}%</label><input id="mposy2" type="range" value="50" min="0" max="100" step="1" [(ngModel)]="mPosY2">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8027578..e801001 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -19,7 +19,7 @@ export class AppComponent implements AfterViewInit {
   size = 400;
   ratio = undefined;
   fill = "#333333";
-  back = "#ffffff";
+  back = "transparent";
   rounded = 0;
   quiet = 1;
   mode: KjuaMode = "label";