wasm-image-optimization 1.0.2 → 1.0.4

package/README.md

@@ -1,5 +1,8 @@
 # wasm-image-optimization
 
+- The 'avif' version is available here  
+  https://www.npmjs.com/package/wasm-image-optimization-avif
+
 - Cloudflare workers  
   `import { optimizeImage } from 'wasm-image-optimization';`
 - Next.js(Webpack)  
@@ -31,8 +34,23 @@ optimizeImage({image: ArrayBuffer, width?: number, height?:number,quality?: numb
 
 ## Next.js image optimization with Cloudflare
 
+### Parameters
+
+| Name | Type   | Description                |
+| ---- | ------ | -------------------------- |
+| url  | string | Image URL                  |
+| q    | number | Quality                    |
+| w    | number | Width                      |
+| type | string | Output type(webp/png/jpeg) |
+
+https://xxx.yyy.workers.dev/?url=https://xxx.png&q=80&w=200
+
+### Source code
+
+https://github.com/SoraKumo001/cloudflare-workers-image-optimization
+
 ```ts
-import { optimizeImage } from 'wasm-image-optimization';
+import { optimizeImage } from "wasm-image-optimization";
 
 const isValidUrl = (url: string) => {
   try {
@@ -48,54 +66,64 @@ const handleRequest = async (
   _env: {},
   ctx: ExecutionContext
 ): Promise<Response> => {
-  const accept = request.headers.get('accept');
+  const url = new URL(request.url);
+  const params = url.searchParams;
+  const type = ["webp", "png", "jpeg"].find((v) => v === params.get("type")) as
+    | "webp"
+    | "png"
+    | "jpeg"
+    | undefined;
+  const accept = request.headers.get("accept");
   const isWebp =
     accept
-      ?.split(',')
+      ?.split(",")
       .map((format) => format.trim())
-      .some((format) => ['image/webp', '*/*', 'image/*'].includes(format)) ?? true;
-
-  const url = new URL(request.url);
+      .some((format) => ["image/webp", "*/*", "image/*"].includes(format)) ??
+    true;
 
-  const params = url.searchParams;
-  const imageUrl = params.get('url');
+  const imageUrl = params.get("url");
   if (!imageUrl || !isValidUrl(imageUrl)) {
-    return new Response('url is required', { status: 400 });
+    return new Response("url is required", { status: 400 });
   }
 
   const cache = caches.default;
-  url.searchParams.append('webp', isWebp.toString());
+  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 width = params.get("w");
+  const quality = params.get("q");
 
-  const [srcImage, contentType] = await fetch(imageUrl, { cf: { cacheKey: imageUrl } })
+  const [srcImage, contentType] = await fetch(imageUrl, {
+    cf: { cacheKey: imageUrl },
+  })
     .then(async (res) =>
-      res.ok ? ([await res.arrayBuffer(), res.headers.get('content-type')] as const) : []
+      res.ok
+        ? ([await res.arrayBuffer(), res.headers.get("content-type")] as const)
+        : []
     )
     .catch(() => []);
 
   if (!srcImage) {
-    return new Response('image not found', { status: 404 });
+    return new Response("image not found", { status: 404 });
   }
 
-  if (contentType && ['image/svg+xml', 'image/gif'].includes(contentType)) {
+  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',
+        "Content-Type": contentType,
+        "Cache-Control": "public, max-age=31536000, immutable",
       },
     });
     ctx.waitUntil(cache.put(cacheKey, response.clone()));
     return response;
   }
 
-  const format = isWebp ? 'webp' : contentType === 'image/jpeg' ? 'jpeg' : 'png';
+  const format =
+    type ?? (isWebp ? "webp" : contentType === "image/jpeg" ? "jpeg" : "png");
   const image = await optimizeImage({
     image: srcImage,
     width: width ? parseInt(width) : undefined,
@@ -104,8 +132,8 @@ const handleRequest = async (
   });
   const response = new Response(image, {
     headers: {
-      'Content-Type': `image/${format}`,
-      'Cache-Control': 'public, max-age=31536000, immutable',
+      "Content-Type": `image/${format}`,
+      "Cache-Control": "public, max-age=31536000, immutable",
       date: new Date().toUTCString(),
     },
   });
@@ -126,7 +154,7 @@ export default {
  */
 const config = {
   images: {
-    path: 'https://xxx.yyy.workers.dev/',
+    path: "https://xxx.yyy.workers.dev/",
   },
 };
 export default config;
@@ -136,16 +164,21 @@ export default config;
 
 ### Parameters
 
-| Name | Type   | Description |
-| ---- | ------ | ----------- |
-| url  | string | Image URL   |
-| q    | number | Quality     |
-| w    | number | Width       |
+| Name | Type   | Description                |
+| ---- | ------ | -------------------------- |
+| url  | string | Image URL                  |
+| q    | number | Quality                    |
+| w    | number | Width                      |
+| type | string | Output type(webp/png/jpeg) |
 
 https://xxxx.deno.dev/?url=https://xxx.png&q=80&w=200
 
+### Source code
+
+https://github.com/SoraKumo001/deno-wasm-image-optimization
+
 ```ts
-import { optimizeImage } from 'npm:wasm-image-optimization/esm';
+import { optimizeImage } from "npm:wasm-image-optimization/esm";
 
 const isValidUrl = (url: string) => {
   try {
@@ -156,7 +189,7 @@ const isValidUrl = (url: string) => {
   }
 };
 
-const cache = await caches.open('image-cache');
+const cache = await caches.open("image-cache");
 
 Deno.serve(async (request) => {
   const cached = await cache.match(request);
@@ -166,55 +199,59 @@ Deno.serve(async (request) => {
 
   const url = new URL(request.url);
   const params = url.searchParams;
-  const type = ['webp', 'png', 'jpeg'].find((v) => v === params.get('type')) as
-    | 'webp'
-    | 'png'
-    | 'jpeg'
+  const type = ["webp", "png", "jpeg"].find((v) => v === params.get("type")) as
+    | "webp"
+    | "png"
+    | "jpeg"
     | undefined;
-  const accept = request.headers.get('accept');
+  const accept = request.headers.get("accept");
   const isWebp =
     accept
-      ?.split(',')
+      ?.split(",")
       .map((format) => format.trim())
-      .some((format) => ['image/webp', '*/*', 'image/*'].includes(format)) ?? true;
+      .some((format) => ["image/webp", "*/*", "image/*"].includes(format)) ??
+    true;
 
-  const imageUrl = params.get('url');
+  const imageUrl = params.get("url");
   if (!imageUrl || !isValidUrl(imageUrl)) {
-    return new Response('url is required', { status: 400 });
+    return new Response("url is required", { status: 400 });
   }
 
-  url.searchParams.append('webp', isWebp.toString());
+  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 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) : []
+      res.ok
+        ? ([await res.arrayBuffer(), res.headers.get("content-type")] as const)
+        : []
     )
     .catch(() => []);
 
   if (!srcImage) {
-    return new Response('image not found', { status: 404 });
+    return new Response("image not found", { status: 404 });
   }
 
-  if (contentType && ['image/svg+xml', 'image/gif'].includes(contentType)) {
+  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',
+        "Content-Type": contentType,
+        "Cache-Control": "public, max-age=31536000, immutable",
       },
     });
     cache.put(request, response.clone());
     return response;
   }
 
-  const format = type ?? (isWebp ? 'webp' : contentType === 'image/jpeg' ? 'jpeg' : 'png');
+  const format =
+    type ?? (isWebp ? "webp" : contentType === "image/jpeg" ? "jpeg" : "png");
   const image = await optimizeImage({
     image: srcImage,
     width: width ? parseInt(width) : undefined,
@@ -223,8 +260,8 @@ Deno.serve(async (request) => {
   });
   const response = new Response(image, {
     headers: {
-      'Content-Type': `image/${format}`,
-      'Cache-Control': 'public, max-age=31536000, immutable',
+      "Content-Type": `image/${format}`,
+      "Cache-Control": "public, max-age=31536000, immutable",
       date: new Date().toUTCString(),
     },
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wasm-image-optimization",
   "description": "Optimize images with wasm on edge runtime",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "exports": {
     "./esm": {
       "default": {