wasm-image-optimization 1.2.23 → 1.2.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -74
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,77 +1,45 @@
|
|
|
1
1
|
# wasm-image-optimization
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
WebAssembly is used to provide image transformation functionality.
|
|
4
4
|
|
|
5
|
-
-
|
|
6
|
-
`import { optimizeImage } from 'wasm-image-optimization';`
|
|
7
|
-
- Next.js (Webpack)
|
|
8
|
-
`import { optimizeImage } from 'wasm-image-optimization/next';`
|
|
9
|
-
- ESM (import base) & Deno Deploy
|
|
10
|
-
`import { optimizeImage } from 'wasm-image-optimization';`
|
|
11
|
-
- Node.js
|
|
12
|
-
`import { optimizeImage } from 'wasm-image-optimization';`
|
|
13
|
-
- Node.js(Multi thread)
|
|
14
|
-
`import { optimizeImage } from 'wasm-image-optimization/node-worker';`
|
|
15
|
-
- Vite (Browser)
|
|
16
|
-
`import { optimizeImage } from 'wasm-image-optimization/vite';`
|
|
17
|
-
- Web Worker (Browser) Multi process
|
|
18
|
-
`import { optimizeImage } from 'wasm-image-optimization/web-worker';`
|
|
19
|
-
|
|
20
|
-
## Samples
|
|
21
|
-
|
|
22
|
-
https://github.com/SoraKumo001/wasm-image-optimization-samples
|
|
5
|
+
- Frontend
|
|
23
6
|
|
|
24
|
-
|
|
7
|
+
- Next.js (Multithreading support)
|
|
8
|
+
- React Router (Multithreading support)
|
|
25
9
|
|
|
26
|
-
|
|
10
|
+
- Backend
|
|
27
11
|
|
|
28
|
-
|
|
12
|
+
- Cloudflare Workers
|
|
13
|
+
- Deno Deploy
|
|
14
|
+
- Node.js (Multithreading support)
|
|
29
15
|
|
|
30
|
-
|
|
16
|
+
- Convert
|
|
17
|
+
- source format
|
|
18
|
+
- svg
|
|
19
|
+
- jpeg (EXIF orientation is supported)
|
|
20
|
+
- png
|
|
21
|
+
- webp
|
|
22
|
+
- avif
|
|
23
|
+
- output format
|
|
24
|
+
- jpeg
|
|
25
|
+
- png
|
|
26
|
+
- webp
|
|
27
|
+
- avif (default)
|
|
31
28
|
|
|
32
|
-
|
|
29
|
+
## Example
|
|
33
30
|
|
|
34
|
-
|
|
31
|
+
https://next-image-convert.vercel.app/
|
|
32
|
+
|
|
35
33
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
Sample for image optimization on Deno.
|
|
39
|
-
|
|
40
|
-
### node-image-convert
|
|
41
|
-
|
|
42
|
-
Sample for converting image formats on Node.js.
|
|
43
|
-
Single-threaded and multi-threaded operation can be selected.
|
|
44
|
-
|
|
45
|
-
## WebWorker on Vite
|
|
46
|
-
|
|
47
|
-
- vite.config.ts
|
|
48
|
-
|
|
49
|
-
```ts
|
|
50
|
-
import wasmImageOptimizationPlugin from "wasm-image-optimization/vite-plugin";
|
|
51
|
-
|
|
52
|
-
export default defineConfig(() => ({
|
|
53
|
-
plugins: [wasmImageOptimizationPlugin()],
|
|
54
|
-
}));
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Next.js on Backend API
|
|
34
|
+
## Functions
|
|
58
35
|
|
|
59
36
|
```ts
|
|
60
|
-
import { optimizeImage } from "wasm-image-optimization";
|
|
61
|
-
…
|
|
62
|
-
export const runtime = "edge";
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
## function
|
|
66
|
-
|
|
67
|
-
```ts
|
|
68
|
-
|
|
69
37
|
optimizeImage({
|
|
70
38
|
image: ArrayBuffer,
|
|
71
39
|
width?: number,
|
|
72
40
|
height?:number,
|
|
73
41
|
quality?: number, // quality: 1-100
|
|
74
|
-
format?: "png" | "jpeg" | "avif" | "webp"}
|
|
42
|
+
format?: "png" | "jpeg" | "avif" | "webp" | "none"}
|
|
75
43
|
speed?: number // avif-speed: 0-10 (Slow-Fast, default: 6)
|
|
76
44
|
):
|
|
77
45
|
Promise<
|
|
@@ -82,26 +50,49 @@ optimizeImageExt({
|
|
|
82
50
|
width?: number,
|
|
83
51
|
height?:number,
|
|
84
52
|
quality?: number,
|
|
85
|
-
format?: "png" | "jpeg" | "avif" | "webp"}
|
|
53
|
+
format?: "png" | "jpeg" | "avif" | "webp" | "none"}
|
|
86
54
|
speed?: number // avif-speed: 0-10 (Slow-Fast, default: 6)
|
|
87
55
|
):
|
|
88
56
|
Promise<{
|
|
89
|
-
data: Uint8Array
|
|
90
|
-
originalWidth: number
|
|
91
|
-
originalHeight: number
|
|
92
|
-
width: number
|
|
93
|
-
height: number
|
|
57
|
+
data: Uint8Array,
|
|
58
|
+
originalWidth: number,
|
|
59
|
+
originalHeight: number,
|
|
60
|
+
width: number,
|
|
61
|
+
height: number}>
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## WebWorker on Vite
|
|
66
|
+
|
|
67
|
+
To use Vite, the following settings are required
|
|
68
|
+
|
|
69
|
+
- vite.config.ts
|
|
94
70
|
|
|
71
|
+
```ts
|
|
72
|
+
import wasmImageOptimizationPlugin from "wasm-image-optimization/vite-plugin";
|
|
73
|
+
|
|
74
|
+
export default defineConfig(() => ({
|
|
75
|
+
plugins: [wasmImageOptimizationPlugin()],
|
|
76
|
+
}));
|
|
95
77
|
```
|
|
96
78
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
-
|
|
101
|
-
|
|
102
|
-
-
|
|
103
|
-
-
|
|
104
|
-
-
|
|
105
|
-
|
|
106
|
-
-
|
|
107
|
-
|
|
79
|
+
## Supported Environments
|
|
80
|
+
|
|
81
|
+
- Cloudflare workers
|
|
82
|
+
`import { optimizeImage } from 'wasm-image-optimization';`
|
|
83
|
+
- Next.js (Webpack)
|
|
84
|
+
`import { optimizeImage } from 'wasm-image-optimization/next';`
|
|
85
|
+
- ESM (import base) & Deno Deploy
|
|
86
|
+
`import { optimizeImage } from 'wasm-image-optimization';`
|
|
87
|
+
- Node.js
|
|
88
|
+
`import { optimizeImage } from 'wasm-image-optimization';`
|
|
89
|
+
- Node.js(Multi thread)
|
|
90
|
+
`import { optimizeImage } from 'wasm-image-optimization/node-worker';`
|
|
91
|
+
- Vite (Browser)
|
|
92
|
+
`import { optimizeImage } from 'wasm-image-optimization/vite';`
|
|
93
|
+
- Web Worker (Browser) Multi process
|
|
94
|
+
`import { optimizeImage } from 'wasm-image-optimization/web-worker';`
|
|
95
|
+
|
|
96
|
+
## Samples
|
|
97
|
+
|
|
98
|
+
https://github.com/SoraKumo001/wasm-image-optimization-samples
|
package/package.json
CHANGED