wasm-image-optimization 1.2.2 → 1.2.3

package/README.md

@@ -17,6 +17,31 @@
 - Web Worker (Browser) Multi process  
   `import { optimizeImage } from 'wasm-image-optimization/web-worker';`
 
+## Samples
+
+https://github.com/SoraKumo001/wasm-image-optimization-samples
+
+### cloudflare-ogp
+
+Sample for generating OGP images on Cloudflare Workers.
+
+### deno-ogp
+
+Sample for generating OGP images on Deno.
+
+### cloudflare-image-optimization
+
+Sample for image optimization on Cloudflare Workers.
+
+### deno-image-optimization
+
+Sample for image optimization on Deno.
+
+### node-image-convert
+
+Sample for converting image formats on Node.js.  
+Single-threaded and multi-threaded operation can be selected.
+
 ## WebWorker on Vite
 
 - vite.config.ts
@@ -68,292 +93,3 @@ optimizeImageExt({
   - png
   - webp
   - avif(default)
-
-## usage
-
-### Node.js (CLI)
-
-```ts
-import fs from "node:fs";
-import {
-  optimizeImage,
-  waitAll,
-  close,
-} from "wasm-image-optimization/node-worker";
-
-const formats = ["webp", "jpeg", "png", "avif"] as const;
-
-const main = async () => {
-  fs.mkdirSync("./image_output", { recursive: true });
-  const files = fs.readdirSync("./images");
-  for (const file of files) {
-    const image = fs.readFileSync(`./images/${file}`);
-    for (const format of formats) {
-      optimizeImage({
-        image,
-        quality: 100,
-        format,
-        width: 1000,
-      }).then((encoded) => {
-        console.log(
-          !!encoded,
-          file,
-          format,
-          encoded && `${Math.floor(encoded.length / 1024)}KB`
-        );
-        if (encoded) {
-          const fileName = file.split(".")[0];
-          fs.promises.writeFile(`image_output/${fileName}.${format}`, encoded);
-        }
-      });
-    }
-  }
-  await waitAll(); // Wait for all workers to finish before exiting the program.
-  close(); // Close all workers
-  console.log("exit");
-};
-main();
-```
-
-### Next.js image optimization with Cloudflare
-
-```ts
-import { optimizeImage } from "wasm-image-optimization";
-
-const isValidUrl = (url: string) => {
-  try {
-    new URL(url);
-    return true;
-  } catch (err) {
-    return false;
-  }
-};
-
-const handleRequest = async (
-  request: Request,
-  _env: {},
-  ctx: ExecutionContext
-): Promise<Response> => {
-  const accept = request.headers.get("accept");
-  const isWebp =
-    accept
-      ?.split(",")
-      .map((format) => format.trim())
-      .some((format) => ["image/webp", "*/*", "image/*"].includes(format)) ??
-    true;
-  const isAvif =
-    accept
-      ?.split(",")
-      .map((format) => format.trim())
-      .some((format) => ["image/avif", "*/*", "image/*"].includes(format)) ??
-    true;
-
-  const url = new URL(request.url);
-
-  const params = url.searchParams;
-  const imageUrl = params.get("url");
-  if (!imageUrl || !isValidUrl(imageUrl)) {
-    return new Response("url is required", { status: 400 });
-  }
-
-  const cache = caches.default;
-  url.searchParams.append("webp", isWebp.toString());
-  const cacheKey = new Request(url.toString());
-  const cachedResponse = await cache.match(cacheKey);
-  if (cachedResponse) {
-    return cachedResponse;
-  }
-
-  const width = params.get("w");
-  const quality = params.get("q");
-
-  const [srcImage, contentType] = await fetch(imageUrl, {
-    cf: { cacheKey: imageUrl },
-  })
-    .then(async (res) =>
-      res.ok
-        ? ([await res.arrayBuffer(), res.headers.get("content-type")] as const)
-        : []
-    )
-    .catch(() => []);
-
-  if (!srcImage) {
-    return new Response("image not found", { status: 404 });
-  }
-
-  if (contentType && ["image/svg+xml", "image/gif"].includes(contentType)) {
-    const response = new Response(srcImage, {
-      headers: {
-        "Content-Type": contentType,
-        "Cache-Control": "public, max-age=31536000, immutable",
-      },
-    });
-    ctx.waitUntil(cache.put(cacheKey, response.clone()));
-    return response;
-  }
-
-  const format = isAvif
-    ? "avif"
-    : isWebp
-      ? "webp"
-      : contentType === "image/jpeg"
-        ? "jpeg"
-        : "png";
-  const image = await optimizeImage({
-    image: srcImage,
-    width: width ? parseInt(width) : undefined,
-    quality: quality ? parseInt(quality) : undefined,
-    format,
-  });
-  const response = new Response(image, {
-    headers: {
-      "Content-Type": `image/${format}`,
-      "Cache-Control": "public, max-age=31536000, immutable",
-      date: new Date().toUTCString(),
-    },
-  });
-  ctx.waitUntil(cache.put(cacheKey, response.clone()));
-  return response;
-};
-
-export default {
-  fetch: handleRequest,
-};
-```
-
-- next.config.js
-
-```js
-/**
- * @type { import("next").NextConfig}
- */
-const config = {
-  images: {
-    path: "https://xxx.yyy.workers.dev/",
-  },
-};
-export default config;
-```
-
-### Deno Deploy
-
-#### Parameters
-
-| Name | Type   | Description |
-| ---- | ------ | ----------- |
-| url  | string | Image URL   |
-| q    | number | Quality     |
-| w    | number | Width       |
-
-https://xxxx.deno.dev/?url=https://xxx.png&q=80&w=200
-
-```ts
-import { optimizeImage } from "npm:wasm-image-optimization/esm";
-
-const isValidUrl = (url: string) => {
-  try {
-    new URL(url);
-    return true;
-  } catch (_e) {
-    return false;
-  }
-};
-
-const isType = (accept: string | null, type: string) => {
-  return (
-    accept
-      ?.split(",")
-      .map((format) => format.trim())
-      .some((format) => [`image/${type}`, "*/*", "image/*"].includes(format)) ??
-    true
-  );
-};
-
-Deno.serve(async (request) => {
-  const url = new URL(request.url);
-  const params = url.searchParams;
-  const type = ["avif", "webp", "png", "jpeg"].find(
-    (v) => v === params.get("type")
-  ) as "avif" | "webp" | "png" | "jpeg" | undefined;
-  const accept = request.headers.get("accept");
-  const isAvif = isType(accept, "avif");
-  const isWebp = isType(accept, "webp");
-
-  const cache = await caches.open(
-    `image-${isAvif ? "-avif" : ""}${isWebp ? "-webp" : ""}`
-  );
-
-  const cached = await cache.match(request);
-  if (cached) {
-    return cached;
-  }
-
-  const imageUrl = params.get("url");
-  if (!imageUrl || !isValidUrl(imageUrl)) {
-    return new Response("url is required", { status: 400 });
-  }
-
-  if (isAvif) {
-    url.searchParams.append("avif", isAvif.toString());
-  } else if (isWebp) {
-    url.searchParams.append("webp", isWebp.toString());
-  }
-
-  const cacheKey = new Request(url.toString());
-  const cachedResponse = await cache.match(cacheKey);
-  if (cachedResponse) {
-    return cachedResponse;
-  }
-
-  const width = params.get("w");
-  const quality = params.get("q");
-
-  const [srcImage, contentType] = await fetch(imageUrl)
-    .then(async (res) =>
-      res.ok
-        ? ([await res.arrayBuffer(), res.headers.get("content-type")] as const)
-        : []
-    )
-    .catch(() => []);
-
-  if (!srcImage) {
-    return new Response("image not found", { status: 404 });
-  }
-
-  if (contentType && ["image/svg+xml", "image/gif"].includes(contentType)) {
-    const response = new Response(srcImage, {
-      headers: {
-        "Content-Type": contentType,
-        "Cache-Control": "public, max-age=31536000, immutable",
-      },
-    });
-    cache.put(request, response.clone());
-    return response;
-  }
-
-  const format =
-    type ??
-    (isAvif
-      ? "avif"
-      : isWebp
-        ? "webp"
-        : contentType === "image/jpeg"
-          ? "jpeg"
-          : "png");
-  const image = await optimizeImage({
-    image: srcImage,
-    width: width ? parseInt(width) : undefined,
-    quality: quality ? parseInt(quality) : undefined,
-    format,
-  });
-  const response = new Response(image, {
-    headers: {
-      "Content-Type": `image/${format}`,
-      "Cache-Control": "public, max-age=31536000, immutable",
-      date: new Date().toUTCString(),
-    },
-  });
-  cache.put(request, response.clone());
-  return response;
-});
-```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wasm-image-optimization",
   "description": "Optimize images with wasm on edge runtime",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "scripts": {
     "test": "yarn ts-node test",
     "lint:fix": "eslint --fix src/ && prettier -w src",
@@ -92,7 +92,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "worker-lib": "2.0.0"
+    "worker-lib": "2.0.2"
   },
   "devDependencies": {
     "@eslint/js": "9.21.0",