fix: re-draw already loaded center images on change

CHANGES.md

@@ -1,3 +1,6 @@
+# 8.0.1 - 2022-12-03
+- Fix center image disappearing when other values are updated (#71)
+
 # 8.0.0 - 2022-12-03
 - Support Angular 15 (#70)
 

projects/ng-qrcode/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ng-qrcode",
   "description": "Simple AOT compatible QR code generator for your Angular project.",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "license": "MIT",
   "author": {
     "name": "Michael Nahkies",

projects/ng-qrcode/src/lib/qr-code.directive.ts

@@ -109,27 +109,34 @@ export class QrCodeDirective implements OnChanges {
         this.centerImage = new Image(centerImageWidth, centerImageHeight)
       }
 
-      if (centerImageSrc !== this.centerImage?.src) {
-        this.centerImage.src = centerImageSrc
+      const centerImage = this.centerImage
+
+      if (centerImageSrc !== this.centerImage.src) {
+        centerImage.src = centerImageSrc
       }
 
       if (centerImageWidth !== this.centerImage.width) {
-        this.centerImage.width = centerImageWidth
+        centerImage.width = centerImageWidth
       }
 
       if (centerImageHeight !== this.centerImage.height) {
-        this.centerImage.height = centerImageHeight
+        centerImage.height = centerImageHeight
       }
 
-      const centerImage = this.centerImage
-
-      centerImage.onload = () => {
+      const doDrawImage = () => {
         context.drawImage(
           centerImage,
           canvas.width / 2 - centerImageWidth / 2,
           canvas.height / 2 - centerImageHeight / 2, centerImageWidth, centerImageHeight,
         )
       }
+
+      centerImage.onload = doDrawImage
+
+      if (centerImage.complete) {
+        doDrawImage()
+      }
+
     }
 
   }