Image Loading and Persisting
How image loading and persisting are handled in Takumi
Image Node can load images via src property, it can be a Data URI, SVG string, or predefined persistent image source.
The fromJsx() helper function will serialize <svg> node for you, so you don't have to make other changes.
Supported Formats
- SVG
- PNG
- JPEG
- WebP
- AVIF
Persistent Image Store
Takumi provides a persistent storage in every renderer instance. It allows you to load images from files or URLs and cache them for later use.
The storage is basically a key-value store, so you can name your keys with any identifier you like.
This is particularly useful for frequently used images, as it avoids the overhead of fetching them repeatedly.
Example
import { readFile } from "node:fs/promises";
import { Renderer } from "@takumi-rs/core";
const renderer = new Renderer({
persistentImages: [
{
src: "whatever-name-you-like.png",
data: await readFile("assets/images/yeecord.png")
}
]
});
// Use the renderer to render a node that references the persistent image
const node = {
type: "image",
src: "whatever-name-you-like.png",
width: 800,
height: 400
};
const output = await renderer.render(node);import initTakumi, { Renderer } from "@takumi-rs/wasm";
// In a WASM environment you typically fetch the binary data yourself
const response = await fetch("/assets/images/yeecord.png");
const arrayBuffer = await response.arrayBuffer();
await initTakumi();
const renderer = new Renderer({
persistentImages: [
{
src: "whatever-name-you-like.png",
data: new Uint8Array(arrayBuffer)
}
]
});
const node = {
type: "image",
src: "whatever-name-you-like.png",
width: 800,
height: 400
};
const output = await renderer.render(node);