Lazy load images to improve startup time

Author: gc

src/lib/canvas/bankImage.ts

@@ -225,11 +225,7 @@ class BankImageTask {
 	public _bgSpriteData: CanvasImage = new CanvasImage();
 	public bgSpriteList: Record<string, IBgSprite> = {};
 	public treeImage!: CanvasImage;
-	public ready!: Promise<void>;
-
-	public constructor() {
-		this.ready = this.init();
-	}
+	public ready: boolean = false;
 
 	async init() {
 		const colors: Record<BGSpriteName, string> = {
@@ -402,6 +398,10 @@ class BankImageTask {
 			mahojiFlags?: BankFlag[];
 		} & BaseCanvasArgs
 	): Promise<BankImageResult> {
+		if (!this.ready) {
+			await this.init();
+			this.ready = true;
+		}
 		let { user, collectionLog, title = '', showValue = true } = opts;
 		const bank = opts.bank.clone();
 		const flags = new Map(Object.entries(opts.flags ?? {}));

src/lib/canvas/chatHeadImage.ts

@@ -1,59 +1,57 @@
 import path from 'node:path';
 import { AttachmentBuilder } from 'discord.js';
+import type { Image } from 'skia-canvas';
 
 import { createCanvas, loadAndCacheLocalImage, printWrappedText } from '@/lib/canvas/canvasUtil.js';
 import { OSRSCanvas } from '@/lib/canvas/OSRSCanvas.js';
 
-const textBoxFile = loadAndCacheLocalImage('./src/lib/resources/images/textbox.png');
+type HeadKey =
+	| 'mejJal'
+	| 'jane'
+	| 'santa'
+	| 'izzy'
+	| 'alry'
+	| 'ketKeh'
+	| 'gertrude'
+	| 'antiSanta'
+	| 'bunny'
+	| 'minimus'
+	| 'partyPete'
+	| 'mysteriousFigure'
+	| 'rudolph'
+	| 'pumpkin'
+	| 'marimbo'
+	| 'spookling'
+	| 'magnaboy'
+	| 'wurMuTheMonkey';
 
-function loadChImg(fileName: string) {
-	const basePath = './src/lib/resources/images/chat_heads/';
-	return loadAndCacheLocalImage(path.join(basePath, fileName));
-}
+const basePath = './src/lib/resources/images';
+const chatBase = `${basePath}/chat_heads`;
 
-const mejJalChatHead = loadChImg('mejJal.png');
-const janeChatHead = loadChImg('jane.png');
-const santaChatHead = loadChImg('santa.png');
-const izzyChatHead = loadChImg('izzy.png');
-const alryTheAnglerChatHead = loadChImg('alryTheAngler.png');
-const ketKehChatHead = loadChImg('ketKeh.png');
-const gertrudeChatHead = loadChImg('gertrude.png');
-const antiSantaChatHead = loadChImg('antisanta.png');
-const bunnyChatHead = loadChImg('bunny.png');
-const minimusHead = loadChImg('minimus.png');
-const pumpkinHead = loadChImg('pumpkin.png');
-const spookling = loadChImg('spookling.png');
-const monkeyChildChatHead = loadChImg('monkeychild.png');
-const magnaboyChatHead = loadChImg('magnaboy.png');
-const marimboChatHead = loadChImg('marimbo.png');
-const partyPeteHead = loadChImg('partyPete.png');
-const mysteriousFigureHead = loadChImg('mysteriousFigure.png');
-const rudolphChatHead = loadChImg('rudolph.png');
-
-const chatHeads = {
-	mejJal: mejJalChatHead,
-	jane: janeChatHead,
-	santa: santaChatHead,
-	izzy: izzyChatHead,
-	alry: alryTheAnglerChatHead,
-	ketKeh: ketKehChatHead,
-	gertrude: gertrudeChatHead,
-	antiSanta: antiSantaChatHead,
-	bunny: bunnyChatHead,
-	minimus: minimusHead,
+const chatHeadPaths: Record<HeadKey, string> = {
+	mejJal: 'mejJal.png',
+	jane: 'jane.png',
+	santa: 'santa.png',
+	izzy: 'izzy.png',
+	alry: 'alryTheAngler.png',
+	ketKeh: 'ketKeh.png',
+	gertrude: 'gertrude.png',
+	antiSanta: 'antisanta.png',
+	bunny: 'bunny.png',
+	minimus: 'minimus.png',
 
 	// BSO
-	partyPete: partyPeteHead,
-	mysteriousFigure: mysteriousFigureHead,
-	rudolph: rudolphChatHead,
-	pumpkin: pumpkinHead,
-	marimbo: marimboChatHead,
-	spookling: spookling,
-	magnaboy: magnaboyChatHead,
-	wurMuTheMonkey: monkeyChildChatHead
+	partyPete: 'partyPete.png',
+	mysteriousFigure: 'mysteriousFigure.png',
+	rudolph: 'rudolph.png',
+	pumpkin: 'pumpkin.png',
+	marimbo: 'marimbo.png',
+	spookling: 'spookling.png',
+	magnaboy: 'magnaboy.png',
+	wurMuTheMonkey: 'monkeychild.png'
 };
 
-const names: Record<keyof typeof chatHeads, string> = {
+const names: Record<HeadKey, string> = {
 	mejJal: 'TzHaar-Mej-Jal',
 	jane: 'Guildmaster Jane',
 	santa: 'Santa',
@@ -76,20 +74,36 @@ const names: Record<keyof typeof chatHeads, string> = {
 	wurMuTheMonkey: 'Wur Mu the Monkey'
 };
 
-export async function newChatHeadImage({ content, head }: { content: string; head: keyof typeof chatHeads }) {
+const imagePromiseCache = new Map<string, Promise<Image>>();
+
+const loadOnce = (absPath: string): Promise<any> => {
+	let p = imagePromiseCache.get(absPath);
+	if (!p) {
+		p = loadAndCacheLocalImage(absPath);
+		imagePromiseCache.set(absPath, p);
+	}
+	return p;
+};
+
+const getTextbox = () => loadOnce(path.join(basePath, 'textbox.png'));
+const getChatHead = (key: HeadKey) => loadOnce(path.join(chatBase, chatHeadPaths[key]));
+
+export async function newChatHeadImage({ content, head }: { content: string; head: HeadKey }) {
 	const canvas = createCanvas(519, 142);
 	const ctx = canvas.getContext('2d');
 	ctx.imageSmoothingEnabled = false;
-	const headImage = await chatHeads[head];
-	const bg = await textBoxFile;
+
+	const [bg, headImage] = await Promise.all([getTextbox(), getChatHead(head)]);
 
 	ctx.drawImage(bg, 0, 0);
 	ctx.drawImage(headImage, 28, bg.height / 2 - headImage.height / 2);
 	ctx.font = '16px RuneScape Quill 8';
 
 	ctx.fillStyle = '#810303';
-	const nameWidth = Math.floor(ctx.measureText(names[head]).width);
-	ctx.fillText(names[head], Math.floor(307 - nameWidth / 2), 36);
+	const name = names[head];
+	const nameWidth = Math.floor(ctx.measureText(name).width);
+	ctx.fillText(name, Math.floor(307 - nameWidth / 2), 36);
+
 	ctx.fillStyle = '#000';
 	printWrappedText(ctx, content, 307, 58, 361);
 
@@ -108,14 +122,12 @@ export async function newChatHeadImage({ content, head }: { content: string; hea
 	return scaledCanvas.toBuffer();
 }
 
-export default async function chatHeadImage({ content, head }: { content: string; head: keyof typeof chatHeads }) {
+export default async function chatHeadImage({ content, head }: { content: string; head: HeadKey }) {
 	const image = await newChatHeadImage({ content, head });
 	return new AttachmentBuilder(image);
 }
 
-export async function mahojiChatHead({ content, head }: { content: string; head: keyof typeof chatHeads }) {
+export async function mahojiChatHead({ content, head }: { content: string; head: HeadKey }) {
 	const image = await newChatHeadImage({ content, head });
-	return {
-		files: [{ attachment: image, name: 'image.jpg' }]
-	};
+	return { files: [{ attachment: image, name: 'image.jpg' }] };
 }

src/lib/canvas/generateGearImage.ts

@@ -239,6 +239,10 @@ export async function generateGearImage({
 	petID?: number | null;
 	gearTemplate?: number;
 } & BaseCanvasArgs) {
+	if (!bankImageTask.ready) {
+		await bankImageTask.init();
+		bankImageTask.ready = true;
+	}
 	const {
 		sprite,
 		uniqueSprite,

src/lib/canvas/pohImage.ts

@@ -40,8 +40,7 @@ const FOLDERS = [
 class PoHImage {
 	public imageCache: Map<number, CanvasImage> = new Map();
 	public bgImages: CanvasImage[] = [];
-	initPromise: Promise<void> | null = this.init();
-	initFinished = false;
+	public ready: boolean = false;
 
 	async init() {
 		this.bgImages.push(await loadAndCacheLocalImage('./src/lib/poh/images/bg_1.jpg'));
@@ -57,7 +56,6 @@ class PoHImage {
 				this.imageCache.set(id, image);
 			}
 		}
-		this.initFinished = true;
 	}
 
 	generateCanvas(bgId: number): [Canvas, CanvasContext] {
@@ -93,7 +91,10 @@ class PoHImage {
 	}
 
 	async run(poh: PlayerOwnedHouse, showSpaces = true) {
-		if (!this.initFinished) await this.initPromise;
+		if (!this.ready) {
+			await this.init();
+			this.ready = true;
+		}
 		const [canvas, ctx] = this.generateCanvas(poh.background_id);
 		for (const [key, objects] of objectEntries(Placeholders)) {
 			if (!key || !objects) continue;

src/mahoji/commands/fake.ts

@@ -1,4 +1,5 @@
 import { randInt } from '@oldschoolgg/rng';
+import type { Image } from 'skia-canvas';
 
 import {
 	type CanvasContext,
@@ -8,7 +9,7 @@ import {
 	measureTextWidth
 } from '@/lib/canvas/canvasUtil.js';
 
-const bg = loadAndCacheLocalImage('./src/lib/resources/images/tob-bg.png');
+let bg: Image | null = null;
 
 const randomMessages = ['omfgggggg', '!#@$@#$@##@$', 'adfsjklfadkjsl;l', 'l00000l wtf'];
 
@@ -189,8 +190,10 @@ export const fakeCommand: OSBMahojiCommand = {
 		ctx.font = '16px OSRSFont';
 		ctx.fillStyle = '#000000';
 
-		const image = await bg;
-		ctx.drawImage(image, 0, 0, image.width, image.height);
+		if (!bg) {
+			bg = await loadAndCacheLocalImage('./src/lib/resources/images/tob-bg.png');
+		}
+		ctx.drawImage(bg, 0, 0, bg.width, bg.height);
 		for (const [names, fn] of thingMap) {
 			if (names.has(options.type.toLowerCase())) {
 				fn(ctx, options.username);

src/mahoji/commands/fakepm.ts

@@ -1,6 +1,8 @@
+import type { Image } from 'skia-canvas';
+
 import { canvasToBuffer, createCanvas, loadAndCacheLocalImage } from '@/lib/canvas/canvasUtil.js';
 
-const bg = loadAndCacheLocalImage('./src/lib/resources/images/pm-bg.png');
+let bg: Image | null = null;
 
 export const fakepmCommand: OSBMahojiCommand = {
 	name: 'fakepm',
@@ -23,8 +25,11 @@ export const fakepmCommand: OSBMahojiCommand = {
 		const canvas = createCanvas(376, 174);
 		const ctx = canvas.getContext('2d');
 		ctx.font = '16px OSRSFont';
-		const img = await bg;
-		ctx.drawImage(img, 0, 0, img.width, img.height);
+
+		if (!bg) {
+			bg = await loadAndCacheLocalImage('./src/lib/resources/images/pm-bg.png');
+		}
+		ctx.drawImage(bg, 0, 0, bg.width, bg.height);
 
 		ctx.fillStyle = '#000000';
 		ctx.fillText(`From ${options.username}: ${options.message}`, 6, 98);