wasm-thumbnail

A tiny library for creating padded image thumbnails intended for use inside webassembly sandboxes.

Supports resizing gif, jpeg, png and webp images.

Usage

WAPM will automatically generate bindings for this package (Michael-F-Bryan/wasm-thumbnail) which are installable using the wapm CLI.

First, make sure you install the Wasmer toolchain.

For JavaScript users, you can add the bindings to your package.json with the following:

$ wapm install --npm Michael-F-Bryan/wasm-thumbnail

Under the hood, this will call npm install. The --yarn flag can be used to run yarn add instead.

From there, you can load the library and use it like any other JavaScript library.

import { bindings } from "@Michael-F-Bryan/wasm-thumbnail";

const image: ArrayBuffer = await fetch("/example.png").then(r => r.arrayBuffer());
const wasmThumbnail = await bindings.wasm_thumbnail();
const result = wasmThumbnail.resizeAndPad(image, 48, 48, 10);

switch (result.tag) {
    case "ok":
        const resized: ArrayBuffer = result.val;
        // Do something with the resized image
        break;
    case "err":
        throw new Error(result.val.message);
}

(note: the code generated by wit-bindgen uses strongly-typed tagged unions for fallible operations instead of exceptions)

Similarly, the Python library can be installed with the --pip flag.

$ wapm install --pip Michael-F-Bryan/wasm-thumbnail

This calls pip install with the correct package name. The package will then be usable like a normal Python library.

from wasm_thumbnail import bindings
from wasm_thumbnail.bindings.wasm_thumbnail import Err

with open("example.png", "rb") as f:
    image = f.read()

wasm_thumbnail = bindings.wasm_thumbnail()
result = wasm_thumbnail.resize_and_pad(image, 48, 48, 10)

if isinstance(result, Err):
    raise Exception(result.value.message)

resized = result.value

with open("thumbnail.jpg", "wb") as f:
    f.write(resized)

Releasing

The WebAssembly is published to WAPM using the cargo wapm sub-command. Make sure to install it first.

$ cargo install cargo-wapm

Next, we can do a dry-run publish to make sure everything is as expected.

$ cd wasm-thumbnail
$ cargo wapm --dry-run
INFO publish: cargo_wapm: Publishing dry_run=true pkg="wasm-thumbnail"
Successfully published package `Michael-F-Bryan/wasm-thumbnail@0.1.0`
INFO Publish succeeded, but package was not published because it was run in dry-run mode
INFO publish: cargo_wapm: Published! pkg="wasm-thumbnail"

$ tree target/wapm
target/wapm
└── wasm-thumbnail
    ├── README.md
    ├── wapm.toml
    ├── wasm_thumbnail.wasm
    └── wasm-thumbnail.wit

1 directory, 4 files

If you are happy with this, remove the --dry-run flag to actually publish to WAPM.

$ cargo wapm
INFO publish: cargo_wapm: Publishing dry_run=false pkg="wasm-thumbnail"
Successfully published package `Michael-F-Bryan/wasm-thumbnail@0.1.0`
INFO publish: cargo_wapm: Published! pkg="wasm-thumbnail"