Possible memory leak in Image/loadImage

[gc]

When running the same code among napicanvas/skiacanvas/node-canvas to load an image, napi appears to use and retain a significantly higher amount of memory.

Using provider: napi
Before napi rss: 54.9mb | heapTotal: 9.7mb | heapUsed: 4.8mb | external: 2.0mb | arrayBuffers: 0.0mb
After napi rss: 373.6mb | heapTotal: 8.0mb | heapUsed: 4.8mb | external: 7.0mb | arrayBuffers: 5.0mb
rss increased by 318.8mb

Using provider: skiacanvas
Before skiacanvas rss: 55.1mb | heapTotal: 9.7mb | heapUsed: 5.0mb | external: 2.0mb | arrayBuffers: 0.0mb
After skiacanvas rss: 115.5mb | heapTotal: 9.7mb | heapUsed: 4.8mb | external: 2.0mb | arrayBuffers: 0.0mb
rss increased by 60.6mb

Using provider: nodecanvas
Before nodecanvas rss: 55.3mb | heapTotal: 9.7mb | heapUsed: 4.8mb | external: 2.0mb | arrayBuffers: 0.0mb
After nodecanvas rss: 67.9mb | heapTotal: 6.7mb | heapUsed: 4.8mb | external: 2.0mb | arrayBuffers: 0.0mb
rss increased by 12.9mb

Reproduction code:

const {
	Canvas: NAPICanvas,
	loadImage: NAPILoadImage,
} = require("@napi-rs/canvas");
const { Canvas: NodeCanvas, loadImage: nodeLoadImage } = require("canvas");
const { Canvas: SkiaCanvas, loadImage: skiaLoadImage } = require("skia-canvas");
const { readFile } = require("fs/promises");
const { writeFileSync } = require("fs");
const path = require("path");

const SPRITESHEET_PATH = "./spritesheet.png";
const SPRITE_COUNT = 20;
const SPRITE_SIZE = 10;
const SIZE = SPRITE_COUNT * SPRITE_SIZE;

async function sleep(ms) {
	return new Promise((resolve) => {
		setTimeout(resolve, ms);
	});
}

function getMem() {
	return Object.entries(process.memoryUsage())
		.map(([key, value]) => `${key}: ${(value / 1024 / 1024).toFixed(1)}mb`)
		.join(" | ");
}

function runGCAndLog(message) {
	for (let i = 0; i < 10; i++) {
		gc();
		sleep(500);
	}
	console.log(`${message} ${getMem()}`);
}

const canvasProviders = [
	{
		name: "napi",
		createCanvas: () => new NAPICanvas(SIZE, SIZE),
		loadImage: NAPILoadImage,
		saveCanvas: async (canvas) => {
			const pngData = await canvas.encode("jpeg");
			writeFileSync(path.join(__dirname, "napi.jpg"), pngData);
		},
	},
	{
		name: "nodecanvas",
		createCanvas: () => new NodeCanvas(SIZE, SIZE),
		loadImage: nodeLoadImage,
		saveCanvas: async (canvas) => {
			const buf3 = canvas.toBuffer("image/jpeg");
			writeFileSync(path.join(__dirname, "node.jpg"), buf3);
		},
	},
	{
		name: "skiacanvas",
		createCanvas: () => new SkiaCanvas(SIZE, SIZE),
		loadImage: skiaLoadImage,
		saveCanvas: async (canvas) => {
			return canvas.saveAs("skia.jpg");
		},
	},
];

const providerStr = process.argv
	.slice(2)
	.find((arg) => arg.startsWith("--provider="))
	?.split("=")[1];
const provider =
	canvasProviders.find((p) => p.name === providerStr) || canvasProviders[1];

console.log(`Using provider: ${provider.name}`);

const start = process.memoryUsage();

async function benchmark() {
	runGCAndLog(`Before ${provider.name}`);
	const imageBuffer = await readFile(SPRITESHEET_PATH);

    {
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
		await provider.loadImage(imageBuffer);
	}
	
}

benchmark().then(() => {
	runGCAndLog(`After ${provider.name}`);
	const end = process.memoryUsage();
	for (const key of Object.keys(end)) {
		if (key !== "rss") continue;
		console.log(`${key} increased by ${((end[key] - start[key])/1024/1024).toFixed(1)}mb`);
	}
});

//spritesheet.png (image used for testing)

run with
node --expose-gc debug.js --provider=skiacanvas && node --expose-gc debug.js --provider=napi && node --expose-gc debug.js --provider=nodecanvas

[gc]

Likely duplicate of #890