Merge pull request #13 from Lenni009/dev

Lenni009 · web-flow · commit 8060deaac822 · 2024-03-12T18:11:40.000+01:00
copy file to worker instead of transfer
diff --git a/.github/workflows/publish-npm.yml b/.github/workflows/publish-npm.yml
@@ -32,6 +32,8 @@ jobs:
         run: |
           npm ci
           npm run build
+          cd dist
+          mv simple-image-compressor.umd.cjs simple-image-compressor-min.js
 
       - name: Publish to NPM
         run: npm publish
diff --git a/README.md b/README.md
@@ -6,33 +6,44 @@ Greatly inspired by https://github.com/WangYuLue/image-conversion
 
 ## Installation
 
+### NPM
+
 ```sh
 npm i simple-image-compressor
 ```
 
+### CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/simple-image-compressor@1.7.0/dist/simple-image-compressor.js"></script>
+```
+
 ## Main function
 
 `compressImage()`
 
 ## Parameters
 
 1. file: File
-2. config: `{ type: 'image/png' | 'image/jpeg' | 'image/gif' = 'image/jpeg', quality: number = 0.92 }`
+2. config: `{ type: 'image/jpeg' | 'image/webp' = 'image/jpeg', quality: number = 0.92 }`
 
 ## Return
 
 `Promise<Blob>`
 
 ## Usage
 
-```ts
+### NPM
+
+```js
 import { compressImage } from 'simple-image-compressor';
 
 async function compressFile(file) {
-  const res = await compressImage(file, {
+  const options = {
     quality: 0.9,
     type: 'image/jpeg',
-  });
+  };
+  const res = await compressImage(file, options);
   return new File([res], 'new filename.jpg', { type: 'image/jpeg' });
 }
 
@@ -43,19 +54,50 @@ const compressedImage = await compressFile(file);
 // upload to server, etc.
 ```
 
+### CDN
+
+```html
+<html lang="en">
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/simple-image-compressor@1.6.0/dist/simple-image-compressor.js"></script>
+    <script>
+      window.onload = () => {
+        const fileInput = document.getElementById('file-input');
+        fileInput.addEventListener('change', async () => {
+          const file = fileInput.files[0];
+          const options = {
+            quality: 0.9,
+            type: imageCompressor.imageTypes.WEBP,
+          };
+          const compressedImage = await imageCompressor.compressImage(file, options);
+          // do something with the compressed image
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <input
+      id="file-input"
+      type="file"
+    />
+  </body>
+</html>
+```
+
 ### Additional Export
 
-```ts
+```js
 import { imageTypes, compressImage } from 'simple-image-compressor';
 ```
 
 `imageTypes` is an object containing the two expected values for `config.type`:
 
-```ts
+```js
 const imageTypes = {
   WEBP: 'image/webp',
   JPEG: 'image/jpeg',
-}
+};
 ```
 
 ## How it works
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "simple-image-compressor",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "type": "module",
   "description": "Simple frontend JS library to compress images",
-  "main": "./dist/index.js",
+  "main": "./dist/simple-image-compressor.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
diff --git a/src/main.ts b/src/main.ts
@@ -18,10 +18,8 @@ export async function compressImage(file: File, config: CompressionConfig = {}):
     ...config,
   };
 
-  const buffer = await file.arrayBuffer();
-
   // construct object to send to worker
-  const workerMessage: WorkerMessage = { buffer, img: { width, height }, config: workerConfig };
+  const workerMessage: WorkerMessage = { file, img: { width, height }, config: workerConfig };
 
   // let the worker process the file
   const compressedBlob = await handleWorkerProcess(workerMessage);
diff --git a/src/types.ts b/src/types.ts
@@ -15,19 +15,19 @@ export interface WorkerMessageConfig extends CompressionConfig {
 
 export interface WorkerMessage {
   img: { width: number; height: number };
-  buffer: ArrayBuffer;
+  file: File;
   config: WorkerMessageConfig;
 }
 
 type Status = 'success' | 'error';
-type WorkerData = ArrayBuffer | string;
+type WorkerData = Blob | string;
 
 interface GenericWorkerResponse<T extends Status, U extends WorkerData> {
   status: T;
   data: U;
 }
 
-export type WorkerSuccessResponse = GenericWorkerResponse<'success', ArrayBuffer>;
+export type WorkerSuccessResponse = GenericWorkerResponse<'success', Blob>;
 export type WorkerErrorResponse = GenericWorkerResponse<'error', string>;
 
 export type WorkerResponse = WorkerSuccessResponse | WorkerErrorResponse;
diff --git a/src/worker.ts b/src/worker.ts
@@ -3,12 +3,11 @@ import type { WorkerErrorResponse, WorkerMessage, WorkerSuccessResponse } from '
 onmessage = async ({ data }: MessageEvent<WorkerMessage>) => {
   try {
     const workerResult = await compressFileWorker(data);
-    const buffer = await workerResult.arrayBuffer();
     const transferObject: WorkerSuccessResponse = {
       status: 'success',
-      data: buffer,
+      data: workerResult,
     };
-    postMessage(transferObject, { transfer: [transferObject.data] });
+    postMessage(transferObject);
   } catch (error) {
     const errorMessage = `Could not compress! ${error instanceof Error ? error.message : ''}`;
     const transferObject: WorkerErrorResponse = {
@@ -21,15 +20,13 @@ onmessage = async ({ data }: MessageEvent<WorkerMessage>) => {
   }
 };
 
-async function compressFileWorker({ img: { width, height }, buffer, config }: WorkerMessage) {
+async function compressFileWorker({ img: { width, height }, file, config }: WorkerMessage) {
   // Create an OffscreenCanvas
   const offscreenCanvas = new OffscreenCanvas(width, height);
   const ctx = offscreenCanvas.getContext('2d');
 
-  const blob = new Blob([buffer], { type: config.originalType });
-
-  // Create an ImageBitmap from the blob
-  const imageBitmap = await createImageBitmap(blob);
+  // Create an ImageBitmap from the file
+  const imageBitmap = await createImageBitmap(file);
 
   // Draw the ImageBitmap onto the OffscreenCanvas
   ctx?.drawImage(imageBitmap, 0, 0);
diff --git a/src/workerHandler.ts b/src/workerHandler.ts
@@ -7,17 +7,15 @@ export async function handleWorkerProcess(workerMessage: WorkerMessage) {
     const worker = new ImageWorker();
 
     // Send the object URL to the worker
-    worker.postMessage(workerMessage, [workerMessage.buffer]);
+    worker.postMessage(workerMessage);
 
     worker.onmessage = ({ data }: MessageEvent<WorkerResponse>) => {
       if (data.status === 'error') {
         console.error(data.data);
         reject(data.data); // Reject the promise if there's an error
       } else {
-        const file = new Blob([data.data], {
-          type: workerMessage.config.type,
-        });
-        resolve(file); // Resolve the promise with the data from the worker
+        const blob = data.data;
+        resolve(blob); // Resolve the promise with the data from the worker
       }
     };
   });
diff --git a/vite.config.ts b/vite.config.ts
@@ -7,19 +7,19 @@ export default defineConfig({
   base: './',
   plugins: [
     dts({
+      exclude: ['**/**.spec.*', '**/**.test.*', '*.config.*'],
       insertTypesEntry: true,
     }),
   ],
   worker: {
-    format: 'es'
+    format: 'es',
   },
   build: {
     lib: {
       // Could also be a dictionary or array of multiple entry points
       entry: fileURLToPath(new URL('src/main.ts', import.meta.url)),
-      fileName: 'index',
-      name: 'simple-image-compressor',
-      formats: ['es'],
+      name: 'imageCompressor',
+      formats: ['es', 'umd'],
     },
   },
 });
