Merge pull request #16 from Lenni009/dev

Lenni009 · web-flow · commit 9373ed7576bc · 2024-03-12T21:20:48.000+01:00
optimise canvas rendering
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ npm i simple-image-compressor
 ### CDN
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/simple-image-compressor@1.7.0/dist/simple-image-compressor-min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/simple-image-compressor@1.8.0/dist/simple-image-compressor-min.js"></script>
 ```
 
 ## Main function
@@ -59,7 +59,7 @@ const compressedImage = await compressFile(file);
 ```html
 <html lang="en">
   <head>
-    <script src="https://cdn.jsdelivr.net/npm/simple-image-compressor@1.7.0/dist/simple-image-compressor-min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/simple-image-compressor@1.8.0/dist/simple-image-compressor-min.js"></script>
     <script>
       window.onload = () => {
         const fileInput = document.getElementById('file-input');
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-image-compressor",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "type": "module",
   "description": "Simple frontend JS library to compress images",
   "main": "./dist/simple-image-compressor.js",
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,4 @@
 import { imageTypes } from './imageTypes';
-import { objectURLtoImage } from './objectURLtoImage';
 import type { CompressionConfig, WorkerMessage, WorkerMessageConfig } from './types';
 import { handleWorkerProcess } from './workerHandler';
 
@@ -8,18 +7,13 @@ export async function compressImage(file: File, config: CompressionConfig = {}):
   config.type ??= imageTypes.JPEG;
   config.quality ??= 0.92;
 
-  // get width & height of file for canvas dimensions in worker
-  const objectUrl = URL.createObjectURL(file);
-  const { width, height } = await objectURLtoImage(objectUrl);
-  URL.revokeObjectURL(objectUrl);
-
   const workerConfig: WorkerMessageConfig = {
     originalType: file.type,
     ...config,
   };
 
   // construct object to send to worker
-  const workerMessage: WorkerMessage = { file, img: { width, height }, config: workerConfig };
+  const workerMessage: WorkerMessage = { file, config: workerConfig };
 
   // let the worker process the file
   const compressedBlob = await handleWorkerProcess(workerMessage);
diff --git a/src/objectURLtoImage.ts b/src/objectURLtoImage.ts
diff --git a/src/types.ts b/src/types.ts
@@ -14,7 +14,6 @@ export interface WorkerMessageConfig extends CompressionConfig {
 }
 
 export interface WorkerMessage {
-  img: { width: number; height: number };
   file: File;
   config: WorkerMessageConfig;
 }
diff --git a/src/worker.ts b/src/worker.ts
@@ -20,16 +20,19 @@ onmessage = async ({ data }: MessageEvent<WorkerMessage>) => {
   }
 };
 
-async function compressFileWorker({ img: { width, height }, file, config }: WorkerMessage) {
-  // Create an OffscreenCanvas
-  const offscreenCanvas = new OffscreenCanvas(width, height);
-  const ctx = offscreenCanvas.getContext('2d');
-
+async function compressFileWorker({ file, config }: WorkerMessage) {
   // Create an ImageBitmap from the file
   const imageBitmap = await createImageBitmap(file);
 
-  // Draw the ImageBitmap onto the OffscreenCanvas
-  ctx?.drawImage(imageBitmap, 0, 0);
+  // Get width & height of file for canvas dimensions
+  const { width, height } = imageBitmap;
+
+  // Create an OffscreenCanvas
+  const offscreenCanvas = new OffscreenCanvas(width, height);
+  const ctx = offscreenCanvas.getContext('bitmaprenderer');
+
+  // Transfer the ImageBitmap to the OffscreenCanvas
+  ctx?.transferFromImageBitmap(imageBitmap);
 
   const compressedBlob = await offscreenCanvas.convertToBlob(config);
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "simple-image-compressor",`
`3`		`- "version": "1.7.0",`
	`3`	`+ "version": "1.8.0",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"description": "Simple frontend JS library to compress images",`
`6`	`6`	`"main": "./dist/simple-image-compressor.js",`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,6 @@ export interface WorkerMessageConfig extends CompressionConfig {`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`export interface WorkerMessage {`
`17`		`- img: { width: number; height: number };`
`18`	`17`	`file: File;`
`19`	`18`	`config: WorkerMessageConfig;`
`20`	`19`	`}`