Merge pull request #56 from Donaldcwl/fix-ie-issue

fixed issue with IE support

Author: Donaldcwl

CHANGELOG.md

@@ -1,3 +1,6 @@
+## v1.0.11 (8 May 2020)
+* fixed: issue with IE support [#38](https://github.com/Donaldcwl/browser-image-compression/issues/38) [#23](https://github.com/Donaldcwl/browser-image-compression/issues/23)
+
 ## v1.0.10 (7 May 2020)
 * fixed: issue in Web Worker when onProgress is undefined  [#50](https://github.com/Donaldcwl/browser-image-compression/issues/50) 
 * fixed: handle behavior change of exif orientation in iOS 13.4.1 and Safari 13.1 Desktop [#52](https://github.com/Donaldcwl/browser-image-compression/issues/52)

README.md

@@ -134,6 +134,16 @@ or check the "[example]" folder in this repo
 | --------- | --------- | --------- | --------- | --------- | --------- |
 | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
+## IE support ##
+Promise API is being used in this library. If you need to support browser that do not support Promise like IE. You can include the Promise polyfill in your project.
+
+See: https://github.com/taylorhakes/promise-polyfill
+
+You can include the following script to load the Promise polyfill:
+```html
+<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
+```
+
 ## Typescript type definitions ##
 ```
 npm install --save-dev @types/browser-image-compression

example/basic.html

@@ -51,7 +51,7 @@
 
 
 <script>
-  async function compressImage (event, useWebWorker) {
+  function compressImage (event, useWebWorker) {
     var file = event.target.files[0]
     var logDom, progressDom
     if (useWebWorker) {
@@ -65,20 +65,23 @@
 
     logDom.innerHTML = 'Source image size:' + (file.size / 1024 / 1024).toFixed(2) + 'mb'
     console.log('input', file)
-    console.log('ExifOrientation', await imageCompression.getExifOrientation(file))
+    imageCompression.getExifOrientation(file).then(function (o) {
+      console.log('ExifOrientation', o)
+    })
 
     var options = {
       maxSizeMB: parseFloat(document.querySelector('#maxSizeMB').value),
       maxWidthOrHeight: parseFloat(document.querySelector('#maxWidthOrHeight').value),
       useWebWorker: useWebWorker,
       onProgress: onProgress
     }
-    const output = await imageCompression(file, options)
-    logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
-    console.log('output', output)
-    const downloadLink = URL.createObjectURL(output)
-    logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
-    document.getElementById('preview-after-compress').src = downloadLink
+    imageCompression(file, options).then(function (output) {
+        logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
+        console.log('output', output)
+        const downloadLink = URL.createObjectURL(output)
+        logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
+        document.getElementById('preview-after-compress').src = downloadLink
+    })
 
     // await uploadToServer(output)
 
@@ -96,6 +99,7 @@
     })
   }
 </script>
+<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.10/dist/browser-image-compression.js"></script>
 </body>
 </html>

example/development.html

@@ -51,7 +51,7 @@
 
 
 <script>
-  async function compressImage (event, useWebWorker) {
+  function compressImage (event, useWebWorker) {
     var file = event.target.files[0]
     var logDom, progressDom
     if (useWebWorker) {
@@ -65,20 +65,24 @@
 
     logDom.innerHTML = 'Source image size:' + (file.size / 1024 / 1024).toFixed(2) + 'mb'
     console.log('input', file)
-    console.log('ExifOrientation', await imageCompression.getExifOrientation(file))
+    imageCompression.getExifOrientation(file).then(function (o) {
+      console.log('ExifOrientation', o)
+    })
 
     var options = {
       maxSizeMB: parseFloat(document.querySelector('#maxSizeMB').value),
       maxWidthOrHeight: parseFloat(document.querySelector('#maxWidthOrHeight').value),
       useWebWorker: useWebWorker,
       onProgress: onProgress
     }
-    const output = await imageCompression(file, options)
-    logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
-    console.log('output', output)
-    const downloadLink = URL.createObjectURL(output)
-    logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
-    document.getElementById('preview-after-compress').src = downloadLink
+    imageCompression(file, options).then(function (output) {
+      logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
+      console.log('output', output)
+      const downloadLink = URL.createObjectURL(output)
+      logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
+      document.getElementById('preview-after-compress').src = downloadLink
+    })
+
 
     // await uploadToServer(output)
 
@@ -96,6 +100,7 @@
     })
   }
 </script>
+<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
 <script type="text/javascript" src="../dist/browser-image-compression.js"></script>
 </body>
 </html>

lib/utils.js

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

lib/web-worker.js

@@ -109,6 +109,8 @@ export function compressOnWebWorker (file, options) {
     }
 
     worker.addEventListener('message', handler)
+    worker.addEventListener('error', reject)
+
     worker.postMessage({
       file,
       id,