kollagen/cli/collages.ts

import { CollageModes } from "../src/common/collages.ts";
import {
  CanvasRenderingContext2D,
  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 filepath: string;
  private _image: Image | undefined;

  constructor(filepath: string) {
    this.filepath = filepath;
  }

  public get image(): 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();
  }
}

export type CastCanvasRenderingContext =
  & CanvasRenderingContext2D
  & CollageContext;

export default class BrowserCollageModes
  extends CollageModes<CastCanvasRenderingContext, ProxyImage> {
  drawImage(
    ctx: CastCanvasRenderingContext,
    image: ProxyImage,
    sx: number,
    sy: number,
    sw: number,
    sh: number,
    dx: number,
    dy: number,
    dw: number,
    dh: number,
  ): void {
    ctx.drawImage(image.image, sx, sy, sw, sh, dx, dy, dw, dh);
  }
}