JPEGXL

JPEG.js互換のAPIを持つ、Deno／ブラウザ用ESモジュールです。 JPEG XLのcodecとWASMはnpm依存として取得し、npm run buildで配布用JSとWASMをローカルに生成します。 GitHub Pagesではdist/以下を同じサイトから配信するため、外部CDNは使いません。

import { JPEGXL } from "./dist/JPEGXL.js";

const jxl = await JPEGXL.encode(imageData, 90);
const decoded = await JPEGXL.decode(jxl);

encode()とdecode()はWebAssembly初期化のため非同期です。qは0〜100の品質値で、100はlosslessになります。

Build

npm install
npm run build

GitHub Pagesにはdist/を公開します。生成物はdist/JPEGXL.jsとdist/codec/内のWASM／workerファイルです。

GitHub Pages

リポジトリのPages公開対象をルートまたはdocs/にする場合は、dist/をそのままコピーして配置します。 JPEGXL.jsとcodec/の相対関係を保ってください。

<script type="module">
  import { JPEGXL } from "./dist/JPEGXL.js";

  const encoded = await JPEGXL.encode(imageData, 90);
  const decoded = await JPEGXL.decode(encoded);
</script>

WASMは同一オリジンから取得されるため、CDNや外部サーバーへの依存はありません。

Import from code4fukui.github.io

GitHub Pagesに公開したファイルは、URLで直接importできます。

import { JPEGXL } from "https://code4fukui.github.io/JPEGXL/JPEGXL.js";

const encoded = await JPEGXL.encode(imageData, 90);
const decoded = await JPEGXL.decode(encoded);

WASMも同じGitHub Pages上の相対パスから読み込まれます。