From 1b11860372c69f223102af1a3d50cca2138a5c9e Mon Sep 17 00:00:00 2001
From: Moniruzzaman Rony <eproni29@gmail.com>
Date: Wed, 31 Jul 2024 14:06:02 +0600
Subject: [PATCH 1/3] Improved image compression speed with
 `alwaysKeepResolution: true`

---
 example/basic.html       | 12 +++---
 example/development.html | 12 +++---
 lib/image-compression.js | 81 +++++++++++++++++++++++++++++++++++-----
 3 files changed, 85 insertions(+), 20 deletions(-)

diff --git a/example/basic.html b/example/basic.html
index f661a88..43db815 100644
--- a/example/basic.html
+++ b/example/basic.html
@@ -20,9 +20,9 @@
   <p>look at console to see logs</p>
   Options:<br />
   <label for="maxSizeMB">maxSizeMB:
-    <input type="number" id="maxSizeMB" name="maxSizeMB" value="1" /></label><br />
+    <input type="number" id="maxSizeMB" name="maxSizeMB" value="0.5" /></label><br />
   <label for="maxWidthOrHeight">maxWidthOrHeight:
-    <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight" value="1024" /></label>
+    <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight" value="1200" /></label>
   <hr />
   <div>
     <label for="web-worker">
@@ -142,10 +142,12 @@
         maxWidthOrHeight: parseFloat(
           document.querySelector("#maxWidthOrHeight").value
         ),
-        useWebWorker: useWebWorker,
         onProgress: onProgress,
         preserveExif: true,
-        libURL: "https://cdn.jsdelivr.net/npm/browser-image-compression@"+selectedVersion+"/dist/browser-image-compression.js"
+        libURL: "https://cdn.jsdelivr.net/npm/browser-image-compression@"+selectedVersion+"/dist/browser-image-compression.js",
+        alwaysKeepResolution: true,
+        maxIteration: 100,
+        useWebWorker: false,
       };
       if (controller) {
         options.signal = controller.signal;
@@ -193,4 +195,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/example/development.html b/example/development.html
index cce374e..d1fa5b4 100644
--- a/example/development.html
+++ b/example/development.html
@@ -9,9 +9,9 @@
   <p>look at console to see logs</p>
   Options:<br />
   <label for="maxSizeMB">maxSizeMB:
-    <input type="number" id="maxSizeMB" name="maxSizeMB" value="1" /></label><br />
+    <input type="number" id="maxSizeMB" name="maxSizeMB" value="0.5" /></label><br />
   <label for="maxWidthOrHeight">maxWidthOrHeight:
-    <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight" value="1024" /></label>
+    <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight" value="1200" /></label>
   <hr />
   <div>
     <label for="web-worker">
@@ -119,10 +119,12 @@
         maxWidthOrHeight: parseFloat(
           document.querySelector("#maxWidthOrHeight").value
         ),
-        useWebWorker: useWebWorker,
         onProgress: onProgress,
         preserveExif: true,
-        libURL: location.origin + '/dist/browser-image-compression.js'
+        libURL: location.origin + '/dist/browser-image-compression.js',
+        alwaysKeepResolution: true,
+        maxIteration: 100,
+        useWebWorker: false,
       };
       if (controller) {
         options.signal = controller.signal;
@@ -170,4 +172,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/lib/image-compression.js b/lib/image-compression.js
index f811826..87cbbfd 100644
--- a/lib/image-compression.js
+++ b/lib/image-compression.js
@@ -93,7 +93,6 @@ export default async function compress(file, options, previousProgress = 0) {
     return tempFile;
   }
 
-  const sourceSize = file.size;
   const renderedSize = tempFile.size;
   let currentSize = renderedSize;
   let compressedFile;
@@ -101,35 +100,97 @@ export default async function compress(file, options, previousProgress = 0) {
   let ctx;
   let canvas = orientationFixedCanvas;
   const shouldReduceResolution = !options.alwaysKeepResolution && origExceedMaxSize;
-  while (remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
+
+  //Compressed Image using Binary Search
+  let low = 0;
+  let high = 1;
+  const precision = 10000; // 10kb
+  while(low<=high && remainingTrials >=0)
+  {
+    const mid = (low+high)/2;
     const newWidth = shouldReduceResolution ? canvas.width * 0.95 : canvas.width;
     const newHeight = shouldReduceResolution ? canvas.height * 0.95 : canvas.height;
+
     if (process.env.BUILD === 'development') {
       console.log('current width', newWidth);
       console.log('current height', newHeight);
       console.log('current quality', quality);
+
+      console.log("Low:"+low)
+      console.log("Mid:"+mid)
+      console.log("High:"+high)
     }
     [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight);
 
     ctx.drawImage(canvas, 0, 0, newWidth, newHeight);
 
-    if (outputFileType === 'image/png') {
-      quality *= 0.85;
-    } else {
-      quality *= 0.95;
-    }
+    quality = mid;
+
     // eslint-disable-next-line no-await-in-loop
     compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality);
 
     cleanupCanvasMemory(canvas);
-
     canvas = newCanvas;
-
     currentSize = compressedFile.size;
-    // console.log('currentSize', currentSize)
+
+    // Check if the current size is within the maximum size limit and the difference
+    // between the maximum size and current size is less than the precision.
+    if (currentSize <= maxSizeByte && (maxSizeByte - currentSize) < precision) {
+      // If true, exit the loop as the desired condition is met.
+      break;
+    }
+    // Check if the current size is within the maximum size limit and the difference
+    // between the maximum size and current size is greater than the precision.
+    else if (currentSize <= maxSizeByte && (maxSizeByte - currentSize) > precision) {
+      // If true, adjust the lower bound to narrow the search range.
+      low = mid + 0.01;
+    }
+    // If the current size exceeds the maximum size limit.
+    else {
+      // Adjust the upper bound to narrow the search range.
+      high = mid - 0.01;
+    }
+
+
+    if (process.env.BUILD === 'development') {
+      console.log("Compressed image size:" + currentSize)
+      console.log("Iteration step count:" + remainingTrials)
+    }
+
     setProgress(Math.min(99, Math.floor(((renderedSize - currentSize) / (renderedSize - maxSizeByte)) * 100)));
+    remainingTrials--;
   }
 
+//    Previous code
+//    while (remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
+//     const newWidth = shouldReduceResolution ? canvas.width * 0.95 : canvas.width;
+//     const newHeight = shouldReduceResolution ? canvas.height * 0.95 : canvas.height;
+//     if (process.env.BUILD === 'development') {
+//       console.log('current width', newWidth);
+//       console.log('current height', newHeight);
+//       console.log('current quality', quality);
+//     }
+//     [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight);
+
+//     ctx.drawImage(canvas, 0, 0, newWidth, newHeight);
+
+//     if (outputFileType === 'image/png') {
+//       quality *= 0.85;
+//     } else {
+//       quality *= 0.95;
+//     }
+//     // eslint-disable-next-line no-await-in-loop
+//     compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality);
+
+//     cleanupCanvasMemory(canvas);
+
+//     canvas = newCanvas;
+
+//     currentSize = compressedFile.size;
+//      console.log('currentSize: ', currentSize/1000000 +' MB')
+//     setProgress(Math.min(99, Math.floor(((renderedSize - currentSize) / (renderedSize - maxSizeByte)) * 100)));
+//  }
+
   cleanupCanvasMemory(canvas);
   cleanupCanvasMemory(newCanvas);
   cleanupCanvasMemory(maxWidthOrHeightFixedCanvas);

From e39e71c22c2b64c1e708bc3cd96ad5b773c97cee Mon Sep 17 00:00:00 2001
From: imtiazShakil <imtiazdev1@gmail.com>
Date: Wed, 21 Aug 2024 15:45:45 +0600
Subject: [PATCH 2/3] binary search only applied when resolution is intact

code refactored
readme updated with important node version
---
 README.md                |   1 +
 example/basic.html       |  11 ++--
 example/development.html |  12 ++---
 lib/image-compression.js | 109 +++++++++++++++------------------------
 4 files changed, 55 insertions(+), 78 deletions(-)

diff --git a/README.md b/README.md
index 55e11ea..2837316 100644
--- a/README.md
+++ b/README.md
@@ -216,6 +216,7 @@ If your website has CSP enabled and you want to use Web Worker (useWebWorker: tr
 
 ## Contribution
 1. fork the repo and git clone it
+3. run `npm install` # node version greater than `v14.21.3` (`lts/fermium`) is not supported
 2. run `npm run watch` # it will watch code change in lib/ folder and generate js in dist/ folder
 3. add/update code in lib/ folder
 4. try the code by opening example/development.html which will load the js in dist/ folder
diff --git a/example/basic.html b/example/basic.html
index 43db815..ce2ec16 100644
--- a/example/basic.html
+++ b/example/basic.html
@@ -20,9 +20,11 @@
   <p>look at console to see logs</p>
   Options:<br />
   <label for="maxSizeMB">maxSizeMB:
-    <input type="number" id="maxSizeMB" name="maxSizeMB" value="0.5" /></label><br />
+    <input type="number" id="maxSizeMB" name="maxSizeMB" value="1" /></label><br />
   <label for="maxWidthOrHeight">maxWidthOrHeight:
-    <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight" value="1200" /></label>
+    <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight" value="1024" /></label><br />
+  <label for="alwaysKeepResolution">alwaysKeepResolution:
+    <input type="checkbox" id="alwaysKeepResolution" name="alwaysKeepResolution" value="false" /></label>    
   <hr />
   <div>
     <label for="web-worker">
@@ -142,12 +144,11 @@
         maxWidthOrHeight: parseFloat(
           document.querySelector("#maxWidthOrHeight").value
         ),
+        useWebWorker: useWebWorker,
         onProgress: onProgress,
         preserveExif: true,
         libURL: "https://cdn.jsdelivr.net/npm/browser-image-compression@"+selectedVersion+"/dist/browser-image-compression.js",
-        alwaysKeepResolution: true,
-        maxIteration: 100,
-        useWebWorker: false,
+        alwaysKeepResolution: document.querySelector("#alwaysKeepResolution").checked,
       };
       if (controller) {
         options.signal = controller.signal;
diff --git a/example/development.html b/example/development.html
index d1fa5b4..4b6c986 100644
--- a/example/development.html
+++ b/example/development.html
@@ -9,9 +9,11 @@
   <p>look at console to see logs</p>
   Options:<br />
   <label for="maxSizeMB">maxSizeMB:
-    <input type="number" id="maxSizeMB" name="maxSizeMB" value="0.5" /></label><br />
+    <input type="number" id="maxSizeMB" name="maxSizeMB" value="1" /></label><br />
   <label for="maxWidthOrHeight">maxWidthOrHeight:
-    <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight" value="1200" /></label>
+    <input type="number" id="maxWidthOrHeight" name="maxWidthOrHeight" value="1024" /></label><br />
+  <label for="alwaysKeepResolution">alwaysKeepResolution:
+    <input type="checkbox" id="alwaysKeepResolution" name="alwaysKeepResolution" value="false" /></label>
   <hr />
   <div>
     <label for="web-worker">
@@ -113,18 +115,16 @@
       });
 
       controller = typeof AbortController !== 'undefined' && new AbortController();
-
       var options = {
         maxSizeMB: parseFloat(document.querySelector("#maxSizeMB").value),
         maxWidthOrHeight: parseFloat(
           document.querySelector("#maxWidthOrHeight").value
         ),
+        useWebWorker: useWebWorker,
         onProgress: onProgress,
         preserveExif: true,
         libURL: location.origin + '/dist/browser-image-compression.js',
-        alwaysKeepResolution: true,
-        maxIteration: 100,
-        useWebWorker: false,
+        alwaysKeepResolution: document.querySelector("#alwaysKeepResolution").checked,
       };
       if (controller) {
         options.signal = controller.signal;
diff --git a/lib/image-compression.js b/lib/image-compression.js
index 87cbbfd..1e6ac0f 100644
--- a/lib/image-compression.js
+++ b/lib/image-compression.js
@@ -93,6 +93,7 @@ export default async function compress(file, options, previousProgress = 0) {
     return tempFile;
   }
 
+  const sourceSize = file.size;
   const renderedSize = tempFile.size;
   let currentSize = renderedSize;
   let compressedFile;
@@ -101,98 +102,72 @@ export default async function compress(file, options, previousProgress = 0) {
   let canvas = orientationFixedCanvas;
   const shouldReduceResolution = !options.alwaysKeepResolution && origExceedMaxSize;
 
-  //Compressed Image using Binary Search
-  let low = 0;
-  let high = 1;
-  const precision = 10000; // 10kb
-  while(low<=high && remainingTrials >=0)
-  {
-    const mid = (low+high)/2;
-    const newWidth = shouldReduceResolution ? canvas.width * 0.95 : canvas.width;
-    const newHeight = shouldReduceResolution ? canvas.height * 0.95 : canvas.height;
-
+  while (shouldReduceResolution && remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
+    const newWidth = canvas.width * 0.95;
+    const newHeight = canvas.height * 0.95;
     if (process.env.BUILD === 'development') {
       console.log('current width', newWidth);
       console.log('current height', newHeight);
       console.log('current quality', quality);
-
-      console.log("Low:"+low)
-      console.log("Mid:"+mid)
-      console.log("High:"+high)
     }
     [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight);
 
     ctx.drawImage(canvas, 0, 0, newWidth, newHeight);
 
-    quality = mid;
-
+    if (outputFileType === 'image/png') {
+      quality *= 0.85;
+    } else {
+      quality *= 0.95;
+    }
     // eslint-disable-next-line no-await-in-loop
     compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality);
 
     cleanupCanvasMemory(canvas);
-    canvas = newCanvas;
-    currentSize = compressedFile.size;
-
-    // Check if the current size is within the maximum size limit and the difference
-    // between the maximum size and current size is less than the precision.
-    if (currentSize <= maxSizeByte && (maxSizeByte - currentSize) < precision) {
-      // If true, exit the loop as the desired condition is met.
-      break;
-    }
-    // Check if the current size is within the maximum size limit and the difference
-    // between the maximum size and current size is greater than the precision.
-    else if (currentSize <= maxSizeByte && (maxSizeByte - currentSize) > precision) {
-      // If true, adjust the lower bound to narrow the search range.
-      low = mid + 0.01;
-    }
-    // If the current size exceeds the maximum size limit.
-    else {
-      // Adjust the upper bound to narrow the search range.
-      high = mid - 0.01;
-    }
 
+    canvas = newCanvas;
 
-    if (process.env.BUILD === 'development') {
-      console.log("Compressed image size:" + currentSize)
-      console.log("Iteration step count:" + remainingTrials)
-    }
-
+    currentSize = compressedFile.size;
+    // console.log('currentSize', currentSize)
     setProgress(Math.min(99, Math.floor(((renderedSize - currentSize) / (renderedSize - maxSizeByte)) * 100)));
-    remainingTrials--;
   }
 
-//    Previous code
-//    while (remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
-//     const newWidth = shouldReduceResolution ? canvas.width * 0.95 : canvas.width;
-//     const newHeight = shouldReduceResolution ? canvas.height * 0.95 : canvas.height;
-//     if (process.env.BUILD === 'development') {
-//       console.log('current width', newWidth);
-//       console.log('current height', newHeight);
-//       console.log('current quality', quality);
-//     }
-//     [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight);
+  // if we can't reduce resolution, then we decrease the quality of the image.
+  // To find the highest quality where image size is less than maxSizeBytes we perform binary search on quality
+  if (!shouldReduceResolution) {
+    if (process.env.BUILD === 'development') console.log('image compression by reducing quality only');
 
-//     ctx.drawImage(canvas, 0, 0, newWidth, newHeight);
+    let low = 0; // lowes possible quality
+    let high = 1; // higest possible quality
 
-//     if (outputFileType === 'image/png') {
-//       quality *= 0.85;
-//     } else {
-//       quality *= 0.95;
-//     }
-//     // eslint-disable-next-line no-await-in-loop
-//     compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality);
+    while (low <= high && remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
+      const mid = (low + high) / 2;
+      quality = mid;
 
-//     cleanupCanvasMemory(canvas);
+      if (process.env.BUILD === 'development') {
+        console.log(`Low:${low}`);
+        console.log('current quality', quality);
+        console.log(`High:${high}`);
+      }
 
-//     canvas = newCanvas;
+      // eslint-disable-next-line no-await-in-loop
+      compressedFile = await canvasToFile(canvas, outputFileType, file.name, file.lastModified, quality);
+      currentSize = compressedFile.size;
 
-//     currentSize = compressedFile.size;
-//      console.log('currentSize: ', currentSize/1000000 +' MB')
-//     setProgress(Math.min(99, Math.floor(((renderedSize - currentSize) / (renderedSize - maxSizeByte)) * 100)));
-//  }
+      // If true, adjust the lower bound to narrow the search quality.
+      if (currentSize < maxSizeByte) low = mid;
+      else high = mid - 0.001; // else adjust the upper bound to narrow the search quality.
+
+      if (process.env.BUILD === 'development') {
+        console.log(`Compressed image size:${currentSize}`);
+        console.log(`Iteration step count:${remainingTrials}`);
+      }
+
+      setProgress(Math.min(99, Math.floor(((renderedSize - currentSize) / (renderedSize - maxSizeByte)) * 100)));
+    }
+  }
 
   cleanupCanvasMemory(canvas);
-  cleanupCanvasMemory(newCanvas);
+  if (newCanvas) cleanupCanvasMemory(newCanvas);
   cleanupCanvasMemory(maxWidthOrHeightFixedCanvas);
   cleanupCanvasMemory(orientationFixedCanvas);
   cleanupCanvasMemory(origCanvas);

From 8aebb930fc23654c93651f58b641459a2729fd80 Mon Sep 17 00:00:00 2001
From: imtiazShakil <imtiazdev1@gmail.com>
Date: Wed, 21 Aug 2024 22:06:11 +0600
Subject: [PATCH 3/3] binary search bug fix, execution time tracking in basic,
 development page

---
 example/basic.html       |  5 ++++-
 example/development.html |  4 +++-
 lib/image-compression.js | 37 ++++++++++++++++++++++++-------------
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/example/basic.html b/example/basic.html
index ce2ec16..dd0d180 100644
--- a/example/basic.html
+++ b/example/basic.html
@@ -119,6 +119,7 @@
     var controller
     document.querySelector("#version").innerHTML = imageCompression.version;
     function compressImage(event, useWebWorker) {
+      var startTime = performance.now();
       var file = event.target.files[0];
       var logDom, progressDom;
       if (useWebWorker) {
@@ -155,6 +156,8 @@
       }
       imageCompression(file, options)
         .then(function (output) {
+          var endTime = performance.now();
+
           logDom.innerHTML +=
             ", output size:" + (output.size / 1024 / 1024).toFixed(2) + "mb";
           console.log("output", output);
@@ -164,7 +167,7 @@
             downloadLink +
             '" download="' +
             file.name +
-            '">download compressed image</a>';
+            '">download compressed image</a>,&nbsp; execution time: '+`${endTime-startTime}`+'ms';
           // document.getElementById('preview-after-compress').src = downloadLink
           return uploadToServer(output);
         })
diff --git a/example/development.html b/example/development.html
index 4b6c986..7180cdf 100644
--- a/example/development.html
+++ b/example/development.html
@@ -96,6 +96,7 @@
     var controller
     document.querySelector("#version").innerHTML = imageCompression.version;
     function compressImage(event, useWebWorker) {
+      var startTime = performance.now();
       var file = event.target.files[0];
       var logDom, progressDom;
       if (useWebWorker) {
@@ -131,6 +132,7 @@
       }
       imageCompression(file, options)
         .then(function (output) {
+          var endTime = performance.now();
           logDom.innerHTML +=
             ", output size:" + (output.size / 1024 / 1024).toFixed(2) + "mb";
           console.log("output", output);
@@ -140,7 +142,7 @@
             downloadLink +
             '" download="' +
             file.name +
-            '">download compressed image</a>';
+            '">download compressed image</a>,&nbsp; execution time: '+`${endTime-startTime}`+'ms';
           // document.getElementById('preview-after-compress').src = downloadLink
           return uploadToServer(output);
         })
diff --git a/lib/image-compression.js b/lib/image-compression.js
index 1e6ac0f..1fc48d0 100644
--- a/lib/image-compression.js
+++ b/lib/image-compression.js
@@ -65,7 +65,8 @@ export default async function compress(file, options, previousProgress = 0) {
   // exifOrientation
   const exifOrientation = options.exifOrientation || await getExifOrientation(file);
   incProgress();
-  const orientationFixedCanvas = (await isAutoOrientationInBrowser()) ? maxWidthOrHeightFixedCanvas : followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation);
+  const orientationFixedCanvas = (await isAutoOrientationInBrowser())
+    ? maxWidthOrHeightFixedCanvas : followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation);
   incProgress();
 
   let quality = options.initialQuality || 1.0;
@@ -136,26 +137,29 @@ export default async function compress(file, options, previousProgress = 0) {
   if (!shouldReduceResolution) {
     if (process.env.BUILD === 'development') console.log('image compression by reducing quality only');
 
-    let low = 0; // lowes possible quality
-    let high = 1; // higest possible quality
+    let low = 0; // lowest possible quality
+    let high = quality; // higest possible quality
+    let tmpCompressedFile;
 
-    while (low <= high && remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
-      const mid = (low + high) / 2;
-      quality = mid;
+    while (((high - low) > 0.05 || !compressedFile) && remainingTrials-- > 0) {
+      quality = (low + high) / 2;
 
       if (process.env.BUILD === 'development') {
-        console.log(`Low:${low}`);
-        console.log('current quality', quality);
-        console.log(`High:${high}`);
+        console.log(`minimum quality: ${low}`);
+        console.log(`max quality: ${high}`);
+        console.log(`current quality: ${quality}`);
       }
 
       // eslint-disable-next-line no-await-in-loop
-      compressedFile = await canvasToFile(canvas, outputFileType, file.name, file.lastModified, quality);
-      currentSize = compressedFile.size;
+      tmpCompressedFile = await canvasToFile(canvas, outputFileType, file.name, file.lastModified, quality);
+      currentSize = tmpCompressedFile.size;
 
       // If true, adjust the lower bound to narrow the search quality.
-      if (currentSize < maxSizeByte) low = mid;
-      else high = mid - 0.001; // else adjust the upper bound to narrow the search quality.
+      if (currentSize <= maxSizeByte) {
+        low = quality;
+        compressedFile = tmpCompressedFile;
+        if (process.env.BUILD === 'development') console.log(`found acceptable size: ${currentSize} at quality: ${quality}`);
+      } else high = quality; // else adjust the upper bound to narrow the search quality.
 
       if (process.env.BUILD === 'development') {
         console.log(`Compressed image size:${currentSize}`);
@@ -164,6 +168,13 @@ export default async function compress(file, options, previousProgress = 0) {
 
       setProgress(Math.min(99, Math.floor(((renderedSize - currentSize) / (renderedSize - maxSizeByte)) * 100)));
     }
+
+    // if we can't generate compressedFile within remainingTrials, then we try to get compressedFile with last known quality
+    if (!compressedFile) {
+      compressedFile = await canvasToFile(canvas, outputFileType, file.name, file.lastModified, (low + high) / 2);
+      currentSize = compressedFile.size;
+      setProgress(Math.min(99, Math.floor(((renderedSize - currentSize) / (renderedSize - maxSizeByte)) * 100)));
+    }
   }
 
   cleanupCanvasMemory(canvas);