wasm-tiff-merger

wasm-tiff-merger is an npm package that wraps the Rust/WASM TIFF merger so Vue 3, React, and plain static HTML projects can all call the same API.

Package outputs

• dist/index.js: ESM build for modern bundlers such as Vite.
• dist/index.cjs: CommonJS build.
• dist/browser.js: IIFE build that exposes window.WasmTiffMerger.
• dist/wasm_tiff_merger_bg.wasm: WASM asset loaded by the package.

Build

npm install
npm run build

The build will:

1. Compile Rust to wasm32-unknown-unknown.
2. Generate pkg/ bindings with wasm-bindgen.
3. Bundle the npm package with Rollup.

API

import { init, mergeImagesToTiff } from "wasm-tiff-merger";

await init();
const tiff = await mergeImagesToTiff([file1, file2, file3]);
const smaller = await mergeImagesToTiff([file1, file2, file3], {
  mode: "lossy",
  lossyQuality: 65
});

mergeImagesToTiff(images, options?) supports:

• mode: "lossless" (default) or "lossy".
• lossyQuality: 1-100, only used when mode: "lossy" (default 70).

Supported image inputs:

• Uint8Array
• ArrayBuffer
• ArrayBufferView
• Blob / File

Vue 3

<script setup lang="ts">
import { mergeImagesToTiff } from "wasm-tiff-merger";

async function onChange(event: Event) {
  const files = Array.from((event.target as HTMLInputElement).files ?? []);
  const tiff = await mergeImagesToTiff(files);
  const url = URL.createObjectURL(new Blob([tiff], { type: "image/tiff" }));
  const link = document.createElement("a");
  link.href = url;
  link.download = "merged.tiff";
  link.click();
  URL.revokeObjectURL(url);
}
</script>

Full example: examples/vue3/App.vue

React

import { mergeImagesToTiff } from "wasm-tiff-merger";

async function onChange(event: React.ChangeEvent<HTMLInputElement>) {
  const files = Array.from(event.target.files ?? []);
  const tiff = await mergeImagesToTiff(files);
  const url = URL.createObjectURL(new Blob([tiff], { type: "image/tiff" }));
  const link = document.createElement("a");
  link.href = url;
  link.download = "merged.tiff";
  link.click();
  URL.revokeObjectURL(url);
}

Full example: examples/react/App.tsx

Static HTML

<script src="./browser.js"></script>
<script>
  async function createTiff(files) {
    await window.WasmTiffMerger.init({
      wasmSource: "./wasm_tiff_merger_bg.wasm"
    });

    return window.WasmTiffMerger.mergeImagesToTiff(files);
  }
</script>

Full example: examples/static/index.html

Publish notes

• Keep pkg/ and dist/ in the published package.
• For bundlers, the default init() path resolution uses the copied wasm_tiff_merger_bg.wasm next to the JS bundle.
• For direct <script> usage, pass wasmSource explicitly if the browser bundle is not served from the same folder as the .wasm file.