QOI WASM

A QOI decoder written in the WebAssembly Text Format (WAT). Current size of the library is 549 bytes.

WAT

An implemention of the QOI decoder. This implementation is dependent on that the host can handle Multi-Value Wasm. Included is a compiled WAT to WASM file that can be instantiated to decode images. Demo is deployed here. (Note the requirements for the browser noted below.)

Usage

The wasm module assumes that the QOI data, including the header, is stored at memory index 0 before decompression. To decompress the data call the d method, e.g.,

const header = wasm.instance.exports.d();
const [width, height, channels, colorspace, memoryOffset] = header;

Where the width will be greater than zero if the data is a valid QOI. The memoryOffsets names the index where the decompressed data starts in the now expanded memory area.

Example

In the viewer folder is an example on how to use the module. To view the example you need a browser that supports the File API, works on Chrome at the moment, does not work on Safari. There are two .qoi files in the assets folder that can be used as test input. To run the example locally

node serve.mjs

and point your compatible browser to QOI Viewer

Compiling

To compile the project, install the dependencies and run the compile script

npm i

npm run compile

The ouput is the decoder file called qoi.wasm.

Inline

Another option is to inline the decompressor and the image data into a WASM module. After the module is loaded the instance exports a method called d (for decompress) and the memory (m) where the result will be after decompression. See below for memory layout, main difference here is that the decompressed data is stored at location 0.

Usage

npm run kombine file.qoi

If all goes well a new file will be written in the same folder as the src QOI file.

Example

To see a runtime example running locally

npm run serve

and go to kombiner

To try the compilation step

npm run kombine ./assets/pixil-frame-0.qoi

and the compiled files will be stored in the assets folder.

Some example results. (sizes in bytes)


File                    PNG         QOI         QOI-WASM    QOI-WASM-BROTLI
pixil-frame-o           124         104         530         308
peerfeer_frame_rgba     1684359     1747735     1748180     1019378
dice                    349827      519653      520096      318018
kodim10                 593463      652383      652820      499621
kodim23                 557596      675251      675688      512840
qoi_logo                16605       16488       16925       7968
testcard_rgba           14227       24167       24605       9133
testcard                18371       21857       22295       7360
wikipedia_008           1344960     1521134     1521571     1225351

First two images are included in this repository, the rest comes from the official QOI page.

Dependencies

The WebAssembly Binary Toolkit for compiling the WAT files to WASM.

Brotli for compressing the inlined decompression module.