wasm-image-optimization 1.0.1 → 1.0.3

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)  
@@ -29,10 +32,25 @@ optimizeImage({image: ArrayBuffer, width?: number, height?:number,quality?: numb
 
 # usage
 
-Next.js image optimization with Cloudflare
+## 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://github.com/SoraKumo001/cloudflare-workers-image-optimization
+
+https://xxx.yyy.workers.dev/?url=https://xxx.png&q=80&w=200
+
+### Source code
 
 ```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,8 +154,118 @@ export default {
  */
 const config = {
   images: {
-    path: 'https://xxx.yyy.workers.dev/',
+    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                      |
+| 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";
+
+const isValidUrl = (url: string) => {
+  try {
+    new URL(url);
+    return true;
+  } catch (_e) {
+    return false;
+  }
+};
+
+const cache = await caches.open("image-cache");
+
+Deno.serve(async (request) => {
+  const cached = await cache.match(request);
+  if (cached) {
+    return cached;
+  }
+
+  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(",")
+      .map((format) => format.trim())
+      .some((format) => ["image/webp", "*/*", "image/*"].includes(format)) ??
+    true;
+
+  const imageUrl = params.get("url");
+  if (!imageUrl || !isValidUrl(imageUrl)) {
+    return new Response("url is required", { status: 400 });
+  }
+
+  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 ?? (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/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 export declare const optimizeImage: ({ image, width, height, quality, format, }: {
     image: BufferSource;
-    width?: number | undefined;
-    height?: number | undefined;
-    quality?: number | undefined;
-    format?: "jpeg" | "png" | "webp" | undefined;
+    width?: number;
+    height?: number;
+    quality?: number;
+    format?: "jpeg" | "png" | "webp" | "avif";
 }) => Promise<Uint8Array | null>;

package/dist/cjs/index.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimizeImage = void 0;
-const libImage_1 = __importDefault(require("../workers/libImage"));
-const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const libImage_1 = __importDefault(require("../workers/libImage"));
 const libImage = (0, libImage_1.default)({
-    wasmBinary: fs_1.default.readFileSync(path_1.default.resolve(__dirname, '../esm/libImage.wasm')),
+    wasmBinary: fs_1.default.readFileSync(path_1.default.resolve(__dirname, "../esm/libImage.wasm")),
 });
-const optimizeImage = async ({ image, width = 0, height = 0, quality = 100, format = 'webp', }) => libImage.then(({ optimize }) => optimize(image, width, height, quality, format));
+const optimizeImage = async ({ image, width = 0, height = 0, quality = 100, format = "webp", }) => libImage.then(({ optimize }) => optimize(image, width, height, quality, format));
 exports.optimizeImage = optimizeImage;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cjs/index.ts"],"names":[],"mappings":";;;;;;AAAA,mEAA2C;AAC3C,gDAAwB;AACxB,4CAAoB;AAEpB,MAAM,QAAQ,GAAG,IAAA,kBAAQ,EAAC;IACxB,UAAU,EAAE,YAAE,CAAC,YAAY,CAAC,cAAI,CAAC,OAAO,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAC;CAC7E,CAAC,CAAC;AAEI,MAAM,aAAa,GAAG,KAAK,EAAE,EAClC,KAAK,EACL,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,OAAO,GAAG,GAAG,EACb,MAAM,GAAG,MAAM,GAOhB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAZ1E,QAAA,aAAa,iBAY6D","sourcesContent":["import LibImage from '../workers/libImage';\nimport path from 'path';\nimport fs from 'fs';\n\nconst libImage = LibImage({\n  wasmBinary: fs.readFileSync(path.resolve(__dirname, '../esm/libImage.wasm')),\n});\n\nexport const optimizeImage = async ({\n  image,\n  width = 0,\n  height = 0,\n  quality = 100,\n  format = 'webp',\n}: {\n  image: BufferSource;\n  width?: number;\n  height?: number;\n  quality?: number;\n  format?: 'jpeg' | 'png' | 'webp';\n}) => libImage.then(({ optimize }) => optimize(image, width, height, quality, format));\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cjs/index.ts"],"names":[],"mappings":";;;;;;AAAA,4CAAoB;AACpB,gDAAwB;AACxB,mEAA2C;AAE3C,MAAM,QAAQ,GAAG,IAAA,kBAAQ,EAAC;IACxB,UAAU,EAAE,YAAE,CAAC,YAAY,CAAC,cAAI,CAAC,OAAO,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAC;CAC7E,CAAC,CAAC;AAEI,MAAM,aAAa,GAAG,KAAK,EAAE,EAClC,KAAK,EACL,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,OAAO,GAAG,GAAG,EACb,MAAM,GAAG,MAAM,GAOhB,EAAE,EAAE,CACH,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7B,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAChD,CAAC;AAfS,QAAA,aAAa,iBAetB","sourcesContent":["import fs from \"fs\";\nimport path from \"path\";\nimport LibImage from \"../workers/libImage\";\n\nconst libImage = LibImage({\n  wasmBinary: fs.readFileSync(path.resolve(__dirname, \"../esm/libImage.wasm\")),\n});\n\nexport const optimizeImage = async ({\n  image,\n  width = 0,\n  height = 0,\n  quality = 100,\n  format = \"webp\",\n}: {\n  image: BufferSource;\n  width?: number;\n  height?: number;\n  quality?: number;\n  format?: \"jpeg\" | \"png\" | \"webp\" | \"avif\";\n}) =>\n  libImage.then(({ optimize }) =>\n    optimize(image, width, height, quality, format)\n  );\n"]}

package/dist/esm/index.d.ts

@@ -1,7 +1,7 @@
 export declare const optimizeImage: ({ image, width, height, quality, format, }: {
     image: BufferSource;
-    width?: number | undefined;
-    height?: number | undefined;
-    quality?: number | undefined;
-    format?: "jpeg" | "png" | "webp" | undefined;
+    width?: number;
+    height?: number;
+    quality?: number;
+    format?: "jpeg" | "png" | "webp" | "avif";
 }) => Promise<Uint8Array | null>;

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import LibImage from './libImage.js';
+import LibImage from "./libImage.js";
 const libImage = LibImage();
-export const optimizeImage = async ({ image, width = 0, height = 0, quality = 100, format = 'webp', }) => libImage.then(({ optimize }) => optimize(image, width, height, quality, format));
+export const optimizeImage = async ({ image, width = 0, height = 0, quality = 100, format = "webp", }) => libImage.then(({ optimize }) => optimize(image, width, height, quality, format));
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/esm/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AAErC,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAE5B,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAAE,EAClC,KAAK,EACL,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,OAAO,GAAG,GAAG,EACb,MAAM,GAAG,MAAM,GAOhB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC","sourcesContent":["import LibImage from './libImage.js';\n\nconst libImage = LibImage();\n\nexport const optimizeImage = async ({\n  image,\n  width = 0,\n  height = 0,\n  quality = 100,\n  format = 'webp',\n}: {\n  image: BufferSource;\n  width?: number;\n  height?: number;\n  quality?: number;\n  format?: 'jpeg' | 'png' | 'webp';\n}) => libImage.then(({ optimize }) => optimize(image, width, height, quality, format));\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/esm/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AAErC,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAE5B,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAAE,EAClC,KAAK,EACL,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,OAAO,GAAG,GAAG,EACb,MAAM,GAAG,MAAM,GAOhB,EAAE,EAAE,CACH,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7B,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAChD,CAAC","sourcesContent":["import LibImage from \"./libImage.js\";\n\nconst libImage = LibImage();\n\nexport const optimizeImage = async ({\n  image,\n  width = 0,\n  height = 0,\n  quality = 100,\n  format = \"webp\",\n}: {\n  image: BufferSource;\n  width?: number;\n  height?: number;\n  quality?: number;\n  format?: \"jpeg\" | \"png\" | \"webp\" | \"avif\";\n}) =>\n  libImage.then(({ optimize }) =>\n    optimize(image, width, height, quality, format)\n  );\n"]}