Skip to content

Commit fdd893a

Browse files
tsukasa-artclaude
tsukasa-art
and
claude
committed
docs: add zenpix-wasm install guide, version check, and WASM page
- README / README.ja: Browser(WASM) section, version check commands, link to zenpix-wasm npm - wasm/README: install steps, SIMD auto-detection, Vite wasmUrl usage, Worker pattern - website: new /wasm and /ja/wasm pages; sidebar entry "Browser (WASM)"; Getting Started pages updated with WASM install and version check - docs/reference/index.md: WASM install and version check added Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 5eb0609 commit fdd893a

9 files changed

Lines changed: 685 additions & 11 deletions

File tree

‎README.ja.md‎

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22

33
C 製の高品質・高速画像処理ライブラリです。JPEG / PNG / WebP / AVIF / GIF / HEIC をデコードし、Lanczos-3 リサイズを経て WebP / AVIF / PNG にエンコードします。Node.js / Bun / Deno 対応（FFI 経由）。ビルド環境は不要です。
44

5-
**npm:** [zenpix](https://www.npmjs.com/package/zenpix)（Node / Bun / Deno・ネイティブ）
5+
**npm:** [zenpix](https://www.npmjs.com/package/zenpix)（Node / Bun / Deno・ネイティブ）・[zenpix-wasm](https://www.npmjs.com/package/zenpix-wasm)（ブラウザ / Cloudflare Pages）
66

77
---
88

99
## インストール
1010

11+
**Node.js / Bun（サーバーサイド）**
12+
1113
```bash
1214
npm install zenpix
1315
```
@@ -21,6 +23,27 @@ import { decode, encodeAvif } from "npm:zenpix/deno";
2123
// 実行時に --allow-ffi フラグが必要
2224
```
2325

26+
**ブラウザ / Cloudflare Pages（WASM）**
27+
28+
```bash
29+
npm install zenpix-wasm
30+
```
31+
32+
詳細は[ブラウザ（WASM）](#ブラウザwasm)セクションを参照してください。
33+
34+
---
35+
36+
## インストール済みバージョンの確認
37+
38+
```bash
39+
# ネイティブ
40+
npx zenpix --version
41+
npm list zenpix
42+
43+
# WASM
44+
npm list zenpix-wasm
45+
```
46+
2447
---
2548

2649
## クイックスタート
@@ -99,12 +122,63 @@ zenpix の AVIF エンコードは **YUV 4:4:4**（クロマサブサンプリ
99122

100123
---
101124

125+
## ブラウザ（WASM）
126+
127+
`zenpix-wasm` はブラウザ上で完全に AVIF エンコードを行います。サーバーへの送信は不要です。ネイティブ版と同じ libavif + libaom を Emscripten で WebAssembly にコンパイルしています。
128+
129+
**用途別パッケージの選択：**
130+
131+
| 用途 | パッケージ |
132+
|---|---|
133+
| Node.js / Bun / Deno サーバー | `zenpix`（ネイティブ・最速） |
134+
| ブラウザ / Cloudflare Pages 静的 JS | `zenpix-wasm` |
135+
| Cloudflare Workers Free | 非対応（CPU 10ms 制限） |
136+
137+
**クイック例：**
138+
139+
```typescript
140+
import { createAvifEncoder } from "zenpix-wasm";
141+
142+
const enc = await createAvifEncoder();
143+
// pixels: RGBA 生ピクセル（width × height × 4 の Uint8Array）
144+
const avif = enc.encode(pixels, width, height, { quality: 60, speed: 10 });
145+
if (avif) {
146+
const blob = new Blob([avif], { type: "image/avif" });
147+
}
148+
enc.dispose();
149+
```
150+
151+
**SIMD 検出（推奨）：**
152+
153+
```typescript
154+
const simdSupported = WebAssembly.validate(new Uint8Array([
155+
0,97,115,109,1,0,0,0,1,5,1,96,0,1,123,3,2,1,0,10,10,1,8,0,65,0,253,15,253,98,11
156+
]));
157+
const { createAvifEncoder } = simdSupported
158+
? await import("zenpix-wasm/simd") // Chrome 91+ / Firefox 89+ / Safari 16.4+
159+
: await import("zenpix-wasm");
160+
```
161+
162+
**Vite — `.wasm` ファイルを URL で渡す：**
163+
164+
```typescript
165+
import wasmUrl from "zenpix-wasm/dist/avif.wasm?url";
166+
import { createAvifEncoder } from "zenpix-wasm";
167+
168+
const enc = await createAvifEncoder(wasmUrl);
169+
```
170+
171+
詳細は [wasm/README.md](./wasm/README.md) を参照してください。
172+
173+
---
174+
102175
## ドキュメント
103176

104177
- [はじめに / API リファレンス](./docs/reference/index.md)
105178
- [CLI ガイド](./docs/reference/cli.md)
106179
- [ベンチマーク詳細](./docs/reference/benchmarks.md)
107180
- [動作環境・トラブルシューティング](./docs/reference/environments.md)
181+
- [ブラウザ（WASM）](./wasm/README.md)
108182

109183
---
110184

‎README.md‎

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ High-quality, high-performance image processing library built in C. Decodes JPEG
44

55
**[日本語ドキュメント](./README.ja.md)**
66

7-
**npm:** [zenpix](https://www.npmjs.com/package/zenpix) (Node / Bun / Deno, native)
7+
**npm:** [zenpix](https://www.npmjs.com/package/zenpix) (Node / Bun / Deno, native) · [zenpix-wasm](https://www.npmjs.com/package/zenpix-wasm) (browser / Cloudflare Pages)
88

99
---
1010

1111
## Install
1212

13+
**Node.js / Bun (server-side)**
14+
1315
```bash
1416
npm install zenpix
1517
```
@@ -23,6 +25,27 @@ import { decode, encodeAvif } from "npm:zenpix/deno";
2325
// requires --allow-ffi flag
2426
```
2527

28+
**Browser / Cloudflare Pages (WASM)**
29+
30+
```bash
31+
npm install zenpix-wasm
32+
```
33+
34+
See [Browser (WASM)](#browser-wasm) below.
35+
36+
---
37+
38+
## Check installed version
39+
40+
```bash
41+
# native
42+
npx zenpix --version
43+
npm list zenpix
44+
45+
# wasm
46+
npm list zenpix-wasm
47+
```
48+
2649
---
2750

2851
## Quick Start
@@ -101,12 +124,63 @@ On low-core VPS environments (2–4 vCPUs), zenpix outperforms Sharp on complex
101124

102125
---
103126

127+
## Browser (WASM)
128+
129+
`zenpix-wasm` encodes AVIF entirely in the browser — no server required. It uses the same libavif + libaom as the native build, compiled to WebAssembly via Emscripten.
130+
131+
**When to use which package:**
132+
133+
| Use case | Package |
134+
|---|---|
135+
| Node.js / Bun / Deno server | `zenpix` (native, fastest) |
136+
| Browser / Cloudflare Pages static JS | `zenpix-wasm` |
137+
| Cloudflare Workers Free | Not supported (10ms CPU limit) |
138+
139+
**Quick example:**
140+
141+
```typescript
142+
import { createAvifEncoder } from "zenpix-wasm";
143+
144+
const enc = await createAvifEncoder();
145+
// pixels: Uint8Array of raw RGBA (width × height × 4)
146+
const avif = enc.encode(pixels, width, height, { quality: 60, speed: 10 });
147+
if (avif) {
148+
const blob = new Blob([avif], { type: "image/avif" });
149+
}
150+
enc.dispose();
151+
```
152+
153+
**SIMD detection (recommended):**
154+
155+
```typescript
156+
const simdSupported = WebAssembly.validate(new Uint8Array([
157+
0,97,115,109,1,0,0,0,1,5,1,96,0,1,123,3,2,1,0,10,10,1,8,0,65,0,253,15,253,98,11
158+
]));
159+
const { createAvifEncoder } = simdSupported
160+
? await import("zenpix-wasm/simd") // Chrome 91+ / Firefox 89+ / Safari 16.4+
161+
: await import("zenpix-wasm");
162+
```
163+
164+
**Vite — serve the `.wasm` file via URL:**
165+
166+
```typescript
167+
import wasmUrl from "zenpix-wasm/dist/avif.wasm?url";
168+
import { createAvifEncoder } from "zenpix-wasm";
169+
170+
const enc = await createAvifEncoder(wasmUrl);
171+
```
172+
173+
See [wasm/README.md](./wasm/README.md) for full documentation.
174+
175+
---
176+
104177
## Documentation
105178

106179
- [Getting Started / API Reference](./docs/reference/index.md)
107180
- [CLI Guide](./docs/reference/cli.md)
108181
- [Benchmarks](./docs/reference/benchmarks.md)
109182
- [Environments & Troubleshooting](./docs/reference/environments.md)
183+
- [Browser (WASM)](./wasm/README.md)
110184

111185
---
112186

‎docs/reference/index.md‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
# zenpix ドキュメント
22

3-
C 製の高速画像処理ライブラリ。JPEG / PNG / WebP / AVIF / GIF / HEIC をデコードし、Lanczos-3 リサイズを経て WebP / AVIF / PNG にエンコードします。Node.js / Bun / Deno 対応。
3+
C 製の高速画像処理ライブラリ。JPEG / PNG / WebP / AVIF / GIF / HEIC をデコードし、Lanczos-3 リサイズを経て WebP / AVIF / PNG にエンコードします。Node.js / Bun / Deno 対応。ブラウザ向けには `zenpix-wasm` を使います。
44

5-
- **npm**: https://www.npmjs.com/package/zenpix
5+
- **npm（サーバー）**: https://www.npmjs.com/package/zenpix
6+
- **npm（ブラウザ / WASM）**: https://www.npmjs.com/package/zenpix-wasm
67
- **GitHub**: https://github.com/tsukasa-art/zenpix
78

89
---
910

1011
## インストール
1112

12-
**Node.js / Bun**
13+
**Node.js / Bun（サーバーサイド）**
1314

1415
```bash
1516
npm install zenpix
@@ -24,6 +25,27 @@ import { decode, encodeAvif } from "npm:zenpix/deno";
2425
// 実行時に --allow-ffi フラグが必要
2526
```
2627

28+
**ブラウザ / Cloudflare Pages（WASM）**
29+
30+
```bash
31+
npm install zenpix-wasm
32+
```
33+
34+
詳細は [../../wasm/README.md](../../wasm/README.md) を参照してください。
35+
36+
---
37+
38+
## インストール済みバージョンの確認
39+
40+
```bash
41+
# ネイティブ
42+
npx zenpix --version
43+
npm list zenpix
44+
45+
# WASM
46+
npm list zenpix-wasm
47+
```
48+
2749
---
2850

2951
## クイックスタート

‎wasm/README.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,99 @@ libavif + libaom を Emscripten で WebAssembly にコンパイルしたブラ
1010
| ブラウザ / Cloudflare Pages 静的 JS | **本モジュール（WASM）** |
1111
| Cloudflare Workers Free | ❌ CPU 10ms 制限で不可 |
1212

13+
## インストール
14+
15+
```bash
16+
npm install zenpix-wasm
17+
```
18+
19+
バージョン確認：
20+
21+
```bash
22+
npm list zenpix-wasm
23+
```
24+
25+
## クイックスタート
26+
27+
```typescript
28+
import { createAvifEncoder } from "zenpix-wasm";
29+
30+
const enc = await createAvifEncoder();
31+
// pixels: RGBA 生ピクセル（width × height × 4 の Uint8Array）
32+
const avif = enc.encode(pixels, width, height, { quality: 60, speed: 10 });
33+
if (avif) {
34+
const blob = new Blob([avif], { type: "image/avif" });
35+
const url = URL.createObjectURL(blob);
36+
}
37+
enc.dispose(); // WASM ヒープを解放（省略可、GC が回収する）
38+
```
39+
40+
## SIMD 版 vs baseline 版
41+
42+
| ファイル | 対応ブラウザ | 速度 |
43+
|---------|------------|------|
44+
| `zenpix-wasm` (baseline) | 全ブラウザ | 基準 |
45+
| `zenpix-wasm/simd` | Chrome 91+ / Firefox 89+ / Safari 16.4+ | ~15% 高速 |
46+
47+
SIMD 対応の自動検出（推奨）：
48+
49+
```typescript
50+
const simdSupported = WebAssembly.validate(new Uint8Array([
51+
0,97,115,109,1,0,0,0,1,5,1,96,0,1,123,3,2,1,0,10,10,1,8,0,65,0,253,15,253,98,11
52+
]));
53+
const { createAvifEncoder } = simdSupported
54+
? await import("zenpix-wasm/simd")
55+
: await import("zenpix-wasm");
56+
57+
const enc = await createAvifEncoder();
58+
```
59+
60+
## Vite / バンドラー
61+
62+
Vite では `.wasm` ファイルを URL として渡す必要があります：
63+
64+
```typescript
65+
import wasmUrl from "zenpix-wasm/dist/avif.wasm?url";
66+
import { createAvifEncoder } from "zenpix-wasm";
67+
68+
const enc = await createAvifEncoder(wasmUrl);
69+
```
70+
71+
SIMD 版を使う場合：
72+
73+
```typescript
74+
import wasmUrl from "zenpix-wasm/dist/avif.simd.wasm?url";
75+
import { createAvifEncoder } from "zenpix-wasm/simd";
76+
77+
const enc = await createAvifEncoder(wasmUrl);
78+
```
79+
80+
## Worker での使用（大画像・低 speed 設定時）
81+
82+
`speed=10` で 1024×1024 が約 60ms かかります。UI をブロックしないよう `Worker` 内での実行を推奨します：
83+
84+
```js
85+
// avif-worker.js
86+
import { createAvifEncoder } from "zenpix-wasm";
87+
const enc = await createAvifEncoder();
88+
89+
self.onmessage = ({ data: { pixels, width, height, quality, speed } }) => {
90+
const avif = enc.encode(pixels, width, height, { quality, speed });
91+
self.postMessage({ avif }, avif ? [avif.buffer] : []);
92+
};
93+
```
94+
95+
```js
96+
// main.js
97+
const worker = new Worker("./avif-worker.js", { type: "module" });
98+
worker.postMessage({ pixels, width, height, quality: 60, speed: 6 });
99+
worker.onmessage = ({ data: { avif } }) => {
100+
if (avif) {
101+
const blob = new Blob([avif], { type: "image/avif" });
102+
}
103+
};
104+
```
105+
13106
## リリース / CI
14107

15108
- **差分の正本**: 利用者向けの変更は **`CHANGELOG.md`**（本ディレクトリ）を更新する。ルート `zenpix` のネイティブ変更はルート **`CHANGELOG.md`**。

‎website/astro.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default defineConfig({
3434
},
3535
sidebar: [
3636
{ slug: 'index', label: 'Getting Started', translations: { ja: 'はじめに' } },
37+
{ slug: 'wasm', label: 'Browser (WASM)', translations: { ja: 'ブラウザ（WASM）' } },
3738
{ slug: 'cli', label: 'CLI Guide', translations: { ja: 'CLI ガイド' } },
3839
{ slug: 'api', label: 'API Reference', translations: { ja: 'API リファレンス' } },
3940
{ slug: 'benchmarks', label: 'Benchmarks', translations: { ja: 'ベンチマーク' } },

0 commit comments

Comments
 (0)