wasm-image-optimization 1.0.3 → 1.1.0

package/README.md

@@ -1,13 +1,10 @@
-# wasm-image-optimization
-
-- The 'avif' version is available here  
-  https://www.npmjs.com/package/wasm-image-optimization-avif
+# wasm-image-optimization-avif
 
 - Cloudflare workers  
   `import { optimizeImage } from 'wasm-image-optimization';`
 - Next.js(Webpack)  
   `import { optimizeImage } from 'wasm-image-optimization/next';`
-- ESM(import base)  
+- ESM(import base) & Deno Deploy  
   `import { optimizeImage } from 'wasm-image-optimization/esm';`
 - CJS(file base)  
   `import { optimizeImage } from 'wasm-image-optimization/node';`
@@ -16,7 +13,10 @@
 
 ```ts
 // quality: 1-100
-optimizeImage({image: ArrayBuffer, width?: number, height?:number,quality?: number,format?: "png" | "jpeg" | "webp"}): Promise<ArrayBuffer>
+optimizeImage({image: ArrayBuffer, width?: number, height?:number,quality?: number,format?: "png" | "jpeg" | "avif" | "webp"}): Promise<ArrayBuffer>
+
+optimizeImageExt({image: ArrayBuffer, width?: number, height?:number,quality?: number,format?: "png" | "jpeg" | "avif" | "webp"}): Promise<{data: Uint8Array;originalWidth: number;originalHeight: number; width: number;height: number;}>
+
 ```
 
 - source format
@@ -28,27 +28,13 @@ optimizeImage({image: ArrayBuffer, width?: number, height?:number,quality?: numb
 - output format
   - jpeg
   - png
-  - webp(default)
+  - avif(default)
+  - webp
 
 # usage
 
 ## 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";
 
@@ -66,13 +52,6 @@ const handleRequest = async (
   _env: {},
   ctx: ExecutionContext
 ): Promise<Response> => {
-  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
@@ -80,7 +59,16 @@ const handleRequest = async (
       .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 });
@@ -122,8 +110,13 @@ const handleRequest = async (
     return response;
   }
 
-  const format =
-    type ?? (isWebp ? "webp" : contentType === "image/jpeg" ? "jpeg" : "png");
+  const format = isAvif
+    ? "avif"
+    : isWebp
+      ? "webp"
+      : contentType === "image/jpeg"
+        ? "jpeg"
+        : "png";
   const image = await optimizeImage({
     image: srcImage,
     width: width ? parseInt(width) : undefined,
@@ -164,19 +157,14 @@ export default config;
 
 ### Parameters
 
-| Name | Type   | Description                |
-| ---- | ------ | -------------------------- |
-| url  | string | Image URL                  |
-| q    | number | Quality                    |
-| w    | number | Width                      |
-| type | string | Output type(webp/png/jpeg) |
+| 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
 
-### Source code
-
-https://github.com/SoraKumo001/deno-wasm-image-optimization
-
 ```ts
 import { optimizeImage } from "npm:wasm-image-optimization/esm";
 
@@ -189,35 +177,46 @@ const isValidUrl = (url: string) => {
   }
 };
 
-const cache = await caches.open("image-cache");
+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 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());
+  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) {
@@ -251,7 +250,14 @@ Deno.serve(async (request) => {
   }
 
   const format =
-    type ?? (isWebp ? "webp" : contentType === "image/jpeg" ? "jpeg" : "png");
+    type ??
+    (isAvif
+      ? "avif"
+      : isWebp
+        ? "webp"
+        : contentType === "image/jpeg"
+          ? "jpeg"
+          : "png");
   const image = await optimizeImage({
     image: srcImage,
     width: width ? parseInt(width) : undefined,

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -3,13 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optimizeImage = void 0;
+exports.optimizeImageExt = exports.optimizeImage = void 0;
 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")),
 });
-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 = "avif", }) => libImage.then(({ optimize }) => {
+    const result = optimize(image, width, height, quality, format);
+    return result?.data;
+});
 exports.optimizeImage = optimizeImage;
+const optimizeImageExt = async ({ image, width = 0, height = 0, quality = 100, format = "avif", }) => libImage.then(({ optimize }) => {
+    return optimize(image, width, height, quality, format);
+});
+exports.optimizeImageExt = optimizeImageExt;
 //# 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,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"]}
+{"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;IAC7B,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/D,OAAO,MAAM,EAAE,IAAI,CAAC;AACtB,CAAC,CAAC,CAAC;AAhBQ,QAAA,aAAa,iBAgBrB;AAEE,MAAM,gBAAgB,GAAG,KAAK,EAAE,EACrC,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;IAC7B,OAAO,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AAfQ,QAAA,gBAAgB,oBAexB","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 = \"avif\",\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    const result = optimize(image, width, height, quality, format);\n    return result?.data;\n  });\n\nexport const optimizeImageExt = async ({\n  image,\n  width = 0,\n  height = 0,\n  quality = 100,\n  format = \"avif\",\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    return optimize(image, width, height, quality, format);\n  });\n"]}

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

@@ -1,4 +1,10 @@
 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 }) => {
+    const result = optimize(image, width, height, quality, format);
+    return result?.data;
+});
+export const optimizeImageExt = async ({ image, width = 0, height = 0, quality = 100, format = "avif", }) => libImage.then(({ optimize }) => {
+    return 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,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"]}
+{"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;IAC7B,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC/D,OAAO,MAAM,EAAE,IAAI,CAAC;AACtB,CAAC,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,EAAE,EACrC,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;IAC7B,OAAO,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AACzD,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\" | \"avif\";\n}) =>\n  libImage.then(({ optimize }) => {\n    const result = optimize(image, width, height, quality, format);\n    return result?.data;\n  });\n\nexport const optimizeImageExt = async ({\n  image,\n  width = 0,\n  height = 0,\n  quality = 100,\n  format = \"avif\",\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    return optimize(image, width, height, quality, format);\n  });\n"]}