fix: re-draw already loaded center images on change (#71)

* fix: re-draw already loaded center images on change

previously if the image was already loaded, changing the value of the QR
code would make it disappear.

this change fixes that by immediately drawing the image if the complete
property is true

may help with #64 - although as reported that was essentially the
reverse of this situation :/

ref:
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete

* chore: update version/changelog

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()
+      }
+
     }
 
   }