Merge pull request #4 from Donaldcwl/v1.0.0

Release of v1.0.0

Author: Donaldcwl

.gitignore

@@ -16,7 +16,7 @@ pids
 lib-cov
 
 # Coverage directory used by tools like istanbul
-coverage
+#coverage
 
 # nyc test coverage
 .nyc_output

.nycrc

@@ -4,8 +4,12 @@
   "include": [
     "lib/**/*.js"
   ],
+  "exclude": [
+    "lib/web-worker.js"
+  ],
   "reporter": [
     "text",
+    "json-summary",
     "json",
     "html",
     "lcov"

README.md

@@ -1,11 +1,21 @@
 # Browser Image Compression #
 [![npm](https://img.shields.io/npm/v/browser-image-compression.svg)](https://www.npmjs.com/package/browser-image-compression)
+[![npm](./coverage/badge.svg)](https://github.com/Donaldcwl/browser-image-compression)
 [![npm](https://img.shields.io/npm/l/browser-image-compression.svg)](https://github.com/Donaldcwl/browser-image-compression)
 
 Javascript module to be run in the web browser for image compression.
 
 ## Features ##
 - You can use this module to compress jpeg and png image by reducing **resolution** or **storage size** before uploading to application server to save bandwidth.
+- **Multi-thread** (web worker) non-blocking compression are supported through options.
+
+## Change log ##
+v1.0.0
+- breaking change: change "imageCompression" function signature
+- use of OffscreenCanvas when support, fallback to document.createElement('canvas')
+- use createImageBitmap when support, fallback to FileReader readAsDataURL
+- add web worker support
+- follows image exif orientation
 
 ## Install ##
 You can download imageCompression from the [dist folder][dist]. Alternatively, you can install it via yarn or npm
@@ -16,7 +26,7 @@ yarn add browser-image-compression
 ```
 or use a CDN like [delivrjs]:
 ```
-https://cdn.jsdelivr.net/npm/browser-image-compression@0.0.4/dist/browser-image-compression.js
+https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.0/dist/browser-image-compression.js
 ```
 
 ## How to use this module in your project? ##
@@ -25,63 +35,61 @@ https://cdn.jsdelivr.net/npm/browser-image-compression@0.0.4/dist/browser-image-
 (can be used in framework like React, Angular, Vue etc)
 
 (work with bundler like webpack and rollup)
-```javascriptx
+```javascript
 import imageCompression from 'browser-image-compression';
 ```
 
 or
 
 #### In html file ####
 ```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@0.0.4/dist/browser-image-compression.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.0/dist/browser-image-compression.js"></script>
 ```
 
 ## API ##
 ### Main function ###
-#### imageCompression(file: File[, maxSizeMB: number][, maxWidthOrHeight: number]): Promise\<File> ####
-### Helper function ###
-#### imageCompression.drawImageInCanvas(img: HTMLImageElement[, maxWidthOrHeight: number]): Canvas ####
-#### imageCompression.getDataUrlFromFile(file: File): Promise\<base64 encoded string> ####
-#### imageCompression.getFilefromDataUrl(dataUrl: string): Promise\<File> ####
-#### imageCompression.loadImage(url: string): Promise\<HTMLImageElement> ####
+```javascript
+// you should provide one of maxSizeMB, maxWidthOrHeight in the options
+const options = { 
+  maxSizeMB: number,          // (default: Number.POSITIVE_INFINITY)
+  maxWidthOrHeight: number,   // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)
+  useWebWorker: boolean,      // optional, use multi-thread web worker, fallback to run in main-thread (default: true)
+  maxIteration: number        // optional, max number of iteration to compress the image (default: 10)
+}
 
-## Usage ##
-```
-<input type="file" accept="image/*" onchange="handleImageUpload(event);">
+imageCompression(file: File, options): Promise<File>
 ```
+### Helper function ###
+- for advanced user only, most user won't need to use the helper functions
 ```javascript
-function handleImageUpload(event) {
-
-  var imageFile = event.target.files[0];
-  console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
-  console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);
-
-  var maxSizeMB = 1;
-  var maxWidthOrHeight = 1920; // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight
-  imageCompression(imageFile, maxSizeMB, maxWidthOrHeight) // maxSizeMB, maxWidthOrHeight are optional
-    .then(function (compressedFile) {
-      console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
-      console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
+imageCompression.getDataUrlFromFile(file: File): Promise<base64 encoded string>
+imageCompression.getFilefromDataUrl(dataUrl: string): Promise<File>
+imageCompression.loadImage(url: string): Promise<HTMLImageElement>
+imageCompression.drawImageInCanvas(img: HTMLImageElement): HTMLCanvasElement
+imageCompression.drawFileInCanvas(file: File): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement]>
+imageCompression.canvasToFile(canvas, fileType, fileName, fileLastModified[, quality]): Promise<File|Blob>
+imageCompression.getExifOrientation(file: File): Promise<number> // based on https://stackoverflow.com/a/32490603/10395024
+```
 
-      return uploadToServer(compressedFile); // write your own logic
-    })
-    .catch(function (error) {
-      console.log(error.message);
-    });
-}
+## Usage ##
+```html
+<input type="file" accept="image/*" onchange="handleImageUpload(event);">
 ```
-with async/await syntax:
+async await syntax:
 ```javascript
 async function handleImageUpload(event) {
 
   const imageFile = event.target.files[0];
   console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
   console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);
 
-  const maxSizeMB = 1;
-  const maxWidthOrHeight = 1920; // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight
+  var options = {
+    maxSizeMB: 1,
+    maxWidthOrHeight: 1920,
+    useWebWorker: true
+  }
   try {
-    const compressedFile = await imageCompression(imageFile, maxSizeMB);  // maxSizeMB, maxWidthOrHeight are optional
+    const compressedFile = await imageCompression(imageFile, options);
     console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
     console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
 
@@ -92,6 +100,31 @@ async function handleImageUpload(event) {
 
 }
 ```
+Promise.then().catch() syntax:
+```javascript
+function handleImageUpload(event) {
+
+  var imageFile = event.target.files[0];
+  console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
+  console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);
+
+  var options = {
+    maxSizeMB: 1,
+    maxWidthOrHeight: 1920,
+    useWebWorker: true
+  }
+  imageCompression(imageFile, options)
+    .then(function (compressedFile) {
+      console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
+      console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
+
+      return uploadToServer(compressedFile); // write your own logic
+    })
+    .catch(function (error) {
+      console.log(error.message);
+    });
+}
+```
 
 ## Browsers support ##