Skip to main content

​
Composition.create()

Create a new composition with the specified dimensions.
​
width
number
required
Canvas width in pixels
​
height
number
required
Canvas height in pixels
Alternatively, pass an options object:
​
options
CompositionOptions
​
composition
Promise<Composition>
The created composition instance
const comp = await Composition.create(512, 512);
// or
const comp = await Composition.create({ width: 512, height: 512 });

​
Initialization

​
Browser

The library auto-initializes in the browser. Simply import and use: 
import { Composition } from '@iamkaf/kimg';

const comp = await Composition.create({ width: 128, height: 128 });

​
Node.js

The library auto-initializes in Node.js as well. The WASM module is loaded automatically: 
import { Composition } from '@iamkaf/kimg';

const comp = await Composition.create({ width: 64, height: 64 });

​
Export Methods

​
exportPng()

Render the composition and encode as PNG.
​
png
Uint8Array
PNG-encoded image data
const png = comp.exportPng();

​
exportJpeg()

Render the composition and encode as JPEG.
​
quality
number
default:"85"
JPEG quality (0-100)
Alternatively, pass an options object:
​
options
ExportJpegOptions
​
jpeg
Uint8Array
JPEG-encoded image data
const jpeg = comp.exportJpeg(90);
// or
const jpeg = comp.exportJpeg({ quality: 90 });

​
exportWebp()

Render the composition and encode as lossless WebP.
​
webp
Uint8Array
WebP-encoded image data
const webp = comp.exportWebp();

​
renderRgba()

Render the composition and return raw RGBA pixel data.
​
rgba
Uint8Array
Flat RGBA pixel array (width × height × 4 bytes)
const rgba = comp.renderRgba();

​
Serialization

​
serialize()

Serialize the composition to binary format for saving.
​
data
Uint8Array
Serialized composition data
const data = comp.serialize();
// Save to file or database

​
Composition.deserialize()

Deserialize a composition from binary data.
​
data
ByteInput
required
Serialized composition data (ArrayBuffer, Uint8Array, or array-like)
​
composition
Promise<Composition>
The deserialized composition instance
const comp = await Composition.deserialize(data);

​
Canvas Operations

​
resizeCanvas()

Resize the composition canvas.
​
width
number
required
New canvas width
​
height
number
required
New canvas height
Alternatively, pass a size object:
​
size
Size
comp.resizeCanvas(1024, 768);
// or
comp.resizeCanvas({ width: 1024, height: 768 });

​
Properties

​
width

​
width
number
Canvas width in pixels (read-only)
console.log(comp.width); // 512

​
height

​
height
number
Canvas height in pixels (read-only)
console.log(comp.height); // 512

​
Memory Management

​
free()

Manually free the composition’s WASM memory. Use this when you’re done with a composition to avoid memory leaks. 
comp.free();
Or use the disposable pattern (if your environment supports it): 
using comp = await Composition.create(512, 512);
// Automatically freed when scope exits

Build docs developers (and LLMs) love

Get started for freeTalk to us