wasm-image-optimization 0.0.9 → 0.1.1

package/README.md

@@ -11,7 +11,7 @@
 
 ```ts
 // quality: 1-100
-optimizeImage({image: ArrayBuffer, width?: number, height?:number,quality?: number}): Promise<ArrayBuffer>
+optimizeImage({image: ArrayBuffer, width?: number, height?:number,quality?: number,format?: "png" | "jpeg" | "webp"}): Promise<ArrayBuffer>
 ```
 
 - source format
@@ -21,7 +21,9 @@ optimizeImage({image: ArrayBuffer, width?: number, height?:number,quality?: numb
   - svg
   - avif
 - output format
-  - webp
+  - jpeg
+  - png
+  - webp(default)
 
 # usage
 
@@ -29,7 +31,6 @@ Next.js image optimization with Cloudflare
 
 ```ts
 import { optimizeImage } from 'wasm-image-optimization';
-export interface Env {}
 
 const isValidUrl = (url: string) => {
   try {
@@ -42,17 +43,28 @@ const isValidUrl = (url: string) => {
 
 const handleRequest = async (
   request: Request,
-  _env: Env,
+  _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 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;
-  const cachedResponse = await cache.match(new Request(url.toString(), request));
+  url.searchParams.append('webp', isWebp.toString());
+  const cacheKey = new Request(url.toString());
+  const cachedResponse = await cache.match(cacheKey);
   if (cachedResponse) {
     return cachedResponse;
   }
@@ -60,25 +72,42 @@ const handleRequest = async (
   const width = params.get('w');
   const quality = params.get('q');
 
-  const srcImage = await fetch(imageUrl, { cf: { cacheKey: imageUrl } })
-    .then((res) => (res.ok ? res.arrayBuffer() : null))
-    .catch((e) => null);
+  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 = 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/webp',
+      'Content-Type': `image/${format}`,
       'Cache-Control': 'public, max-age=31536000, immutable',
+      date: new Date().toUTCString(),
     },
   });
-  ctx.waitUntil(cache.put(request, response.clone()));
+  ctx.waitUntil(cache.put(cacheKey, response.clone()));
   return response;
 };
 

package/dist/cjs/index.d.ts

@@ -1,6 +1,7 @@
-export declare const optimizeImage: ({ image, width, height, quality, }: {
+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;
 }) => Promise<Uint8Array | null>;

package/dist/cjs/index.js

@@ -10,6 +10,6 @@ const fs_1 = __importDefault(require("fs"));
 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, }) => libImage.then(({ optimize }) => optimize(image, width, height, quality));
+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,GAMd,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAVlE,QAAA,aAAa,iBAUqD","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}: {\n  image: BufferSource;\n  width?: number;\n  height?: number;\n  quality?: number;\n}) => libImage.then(({ optimize }) => optimize(image, width, height, quality));\n"]}
+{"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"]}