browser-image-resizer - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

package.json

 {
   "name": "browser-image-resizer",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "A browser-based utility to downscale and resize images using <canvas>",
-  "main": "build/index.js",
+  "main": "dist/index.js",
   "author": "Eric Nograles <[e-mail]>",
   "license": "MIT",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1"
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "babel-loader": "^8.0.5",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3"
   },
   "scripts": {
-    "build": "./node_modules/.bin/babel src -d build"
+    "build": "webpack"
   },
@@ -16,0 +19,0 @@ "repository": "https://github.com/ericnograles/browser-image-resizer.git",

README.md

@@ -13,9 +13,21 @@ # browser-image-resizer
 
-* `npm install browser-image-resizer`
-* `yarn add browser-image-resizer`
+### NPM/Yarn
 
-## Sample - Promises
+- `npm install browser-image-resizer`
+- `yarn add browser-image-resizer`
 
+### Browser
+
+```
+<script src="https://cdn.jsdelivr.net/gh/ericnograles/browser-image-resizer@2.0.0/dist/index.js"></script>
+```
+
+## Usage
+
+### NPM/Yarn
+
+#### Promises
+
 ```javascript
-import readAndCompressImage from 'browser-image-resizer';
+import { readAndCompressImage } from 'browser-image-resizer';
 
@@ -50,6 +62,6 @@ const config = {
 
-## Sample - Async/Await
+#### Async/Await
 
 ```javascript
-import readAndCompressImage from 'browser-image-resizer';
+import { readAndCompressImage } from 'browser-image-resizer';
 
@@ -87,2 +99,71 @@ const config = {
 
+### Browser
+
+#### Promises
+
+```javascript
+const config = {
+  quality: 0.5,
+  maxWidth: 800,
+  maxHeight: 600,
+  autoRotate: true,
+  debug: true
+};
+
+// Note: A single file comes from event.target.files on <input>
+BrowserImageResizer.readAndCompressImage(file, config)
+  .then(resizedImage => {
+    // Upload file to some Web API
+    const url = `http://localhost:3001/upload`;
+    const formData = new FormData();
+    formData.append('images', resizedImage);
+    const options = {
+      method: 'POST',
+      body: formData
+    };
+
+    return fetch(url, options);
+  })
+  .then(result => {
+    // TODO: Handle the result
+    console.log(result);
+  });
+```
+
+#### Async/Await
+
+```javascript
+
+const config = {
+  quality: 0.7,
+  width: 800,
+  height: 600
+};
+
+// Note: A single file comes from event.target.files on <input>
+async function uploadImage(file) {
+  try {
+    let resizedImage = await BrowserImageResizer.readAndCompressImage(file, config);
+
+    const url = `http://localhost:3001/upload`;
+    const formData = new FormData();
+    formData.append('images', resizedImage);
+    const options = {
+      method: 'POST',
+      body: formData
+    };
+
+    let result = await fetch(url, options);
+
+    // TODO: Handle the result
+    console.log(result);
+    return result;
+  } catch (error) {
+    console.error(error);
+    throw(error);
+  }
+}
+```
+
+
 ### readAndCompressImage(file, config) => Promise<Blob>
@@ -97,3 +178,3 @@
 | ------------- |-------------| -----:|
-| `quality`      | The quality of the JPEG | 0.5 |
+| `quality`      | The quality of the image | 0.5 |
 | `maxWidth`      | The maximum width for the downscaled image | 800 |
@@ -100,0 +181,0 @@ | `maxHeight` | The maximum height for the downscaled image | 600 |

src/index.js

@@ -12,3 +12,3 @@ import EXIF from './exif';
 
-export default function readAndCompressImage(file, userConfig) {
+export function readAndCompressImage(file, userConfig) {
   return new Promise(resolve => {
@@ -53,3 +53,3 @@ var img = document.createElement('img');
 
-export function scaleImage(img, config, orientation = 1) {
+function scaleImage(img, config, orientation = 1) {
   var canvas = document.createElement('canvas');
@@ -56,0 +56,0 @@ canvas.width = img.width;

No alert changes

Improved metrics

Total package byte prevSize

234126

increased by45.36%

Number of lines in readme file

185

increased by77.88%

Worsened metrics

Dev dependency count

6

increased by100%

Lines of code

1182

decreased by-47.4%

No dependency changes