fixed: file size may increase

dist/browser-image-compression.d.ts

@@ -1,22 +1,27 @@
-declare module 'browser-image-compression' {
-  interface Options {
+// Type definitions for browser-image-compression 1.0
+// Project: https://github.com/Donaldcwl/browser-image-compression
+// Definitions by: Donald <https://github.com/Donaldcwl>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+interface Options {
     /** @default Number.POSITIVE_INFINITY */
     maxSizeMB?: number;
     /** @default undefined */
     maxWidthOrHeight?: number;
     /** @default false */
     useWebWorker?: boolean;
     /** @default 10 */
-    maxIteration?: number,
+    maxIteration?: number;
     /** Default to be the exif orientation from the image file */
-    exifOrientation?: number,
+    exifOrientation?: number;
     /** A function takes one progress argument (progress from 0 to 100) */
-    onProgress?: (progress: number) => void,
+    onProgress?: (progress: number) => void;
     /** Default to be the original mime type from the image file */
-    fileType?: string
-  }
+    fileType?: string;
+}
 
-  function imageCompression (image: Blob, options: Options): Promise<File | Blob>;
+declare function imageCompression(image: File | Blob, options: Options): Promise<File | Blob>;
 
-  export = imageCompression;
-}
+export as namespace imageCompression;
+
+export = imageCompression;

example/basic.html

@@ -68,8 +68,8 @@
     console.log('ExifOrientation', await imageCompression.getExifOrientation(file))
 
     var options = {
-      maxSizeMB: document.querySelector('#maxSizeMB').value,
-      maxWidthOrHeight: document.querySelector('#maxWidthOrHeight').value,
+      maxSizeMB: parseFloat(document.querySelector('#maxSizeMB').value),
+      maxWidthOrHeight: parseFloat(document.querySelector('#maxWidthOrHeight').value),
       useWebWorker: useWebWorker,
       onProgress: onProgress
     }

example/development.html

@@ -68,8 +68,8 @@
     console.log('ExifOrientation', await imageCompression.getExifOrientation(file))
 
     var options = {
-      maxSizeMB: document.querySelector('#maxSizeMB').value,
-      maxWidthOrHeight: document.querySelector('#maxWidthOrHeight').value,
+      maxSizeMB: parseFloat(document.querySelector('#maxSizeMB').value),
+      maxWidthOrHeight: parseFloat(document.querySelector('#maxWidthOrHeight').value),
       useWebWorker: useWebWorker,
       onProgress: onProgress
     }

lib/image-compression.js

@@ -64,27 +64,32 @@ export default async function compress (file, options) {
 
   let tempFile = await canvasToFile(orientationFixedCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
   incProgress()
+
+  const origExceedMaxSize = tempFile.size > maxSizeByte
+  const sizeBecomeLarger = tempFile.size > file.size
+
   // check if we need to compress or resize
-  if (tempFile.size <= maxSizeByte) {
+  if (!origExceedMaxSize && !sizeBecomeLarger) {
     // no need to compress
     setProgress(100)
     return tempFile
   }
 
-  const originalSize = tempFile.size
-  let currentSize = originalSize
+  const sourceSize = file.size
+  const renderedSize = tempFile.size
+  let currentSize = renderedSize
   let compressedFile
   let newCanvas, ctx
   let canvas = orientationFixedCanvas
-  while (remainingTrials-- && currentSize > maxSizeByte) {
-    const newWidth = canvas.width * 0.9
-    const newHeight = canvas.height * 0.9;
+  while (remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
+    const newWidth = origExceedMaxSize ? canvas.width * 0.95 : canvas.width
+    const newHeight = origExceedMaxSize ? canvas.height * 0.95 : canvas.height;
     [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
 
     ctx.drawImage(canvas, 0, 0, newWidth, newHeight)
 
     if (file.type === 'image/jpeg') {
-      quality *= 0.9
+      quality *= 0.95
     }
     compressedFile = await canvasToFile(newCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
 
@@ -93,7 +98,7 @@ export default async function compress (file, options) {
     canvas = newCanvas
 
     currentSize = compressedFile.size
-    setProgress(Math.min(99, Math.floor((originalSize - currentSize) / (originalSize - maxSizeByte) * 100)))
+    setProgress(Math.min(99, Math.floor((renderedSize - currentSize) / (renderedSize - maxSizeByte) * 100)))
   }
 
   // garbage clean canvas for safari

lib/utils.js

@@ -186,7 +186,7 @@ export function handleMaxWidthOrHeight (canvas, options) {
   const height = canvas.height
   const maxWidthOrHeight = options.maxWidthOrHeight
 
-  const needToHandle = Number.isInteger(maxWidthOrHeight) && (width > maxWidthOrHeight || height > maxWidthOrHeight)
+  const needToHandle = Number.isFinite(maxWidthOrHeight) && (width > maxWidthOrHeight || height > maxWidthOrHeight)
 
   let newCanvas = canvas
   let ctx