lazy load images in deno

cli/collages.ts

@@ -4,20 +4,35 @@ import {
   Image,
 } from "https://deno.land/x/canvas/mod.ts";
 import { CollageContext, CollageImage } from "../src/common/types.ts";
+import { init } from "https://deno.land/x/canvas@v1.3.0/mod.ts";
+
+const canvasKit = await init();
 
 export class ProxyImage implements CollageImage {
-  private image: Image;
+  private filepath: string;
-  public readonly height: number;
+  private _image: Image | undefined;
-  public readonly width: number;
 
-  constructor(image: Image) {
+  constructor(filepath: string) {
-    this.image = image;
+    this.filepath = filepath;
-    this.width = image.width();
-    this.height = image.height();
   }
 
-  public get(): Image {
+  public get image(): Image {
-    return this.image;
+    if (!this._image) {
+      const image = canvasKit.MakeImageFromEncoded(Deno.readFileSync(this.filepath))
+      if (!image) {
+        throw Error(`Failed loading ${this.filepath}!`);
+      }
+      this._image = image;
+    }
+    return this._image;
+  }
+
+  public get width(): number {
+    return this.image.width();
+  }
+
+  public get height(): number {
+    return this.image.height();
   }
 }
 
@@ -39,6 +54,6 @@ export default class BrowserCollageModes
     dw: number,
     dh: number,
   ): void {
-    ctx.drawImage(image.get(), sx, sy, sw, sh, dx, dy, dw, dh);
+    ctx.drawImage(image.image, sx, sy, sw, sh, dx, dy, dw, dh);
   }
 }

cli/main.ts

@@ -62,11 +62,7 @@ if (shuffledFiles.length > 25) {
   shuffledFiles.splice(25, shuffledFiles.length - 25);
 }
 
-const images: ProxyImage[] = (await Promise.all(
+const images: ProxyImage[] = shuffledFiles.map((file) => new ProxyImage(file));
-  shuffledFiles.map(async (imageURL) =>
-    canvasKit.MakeImageFromEncoded(await Deno.readFile(imageURL))
-  ),
-)).map((image) => new ProxyImage(image!));
 
 const modes = new DenoCollageModes();