img-about - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0-beta0

lib/es/index.js

 /**
  * Bundle of img-about
- * Generated: 2019-01-07
- * Version: 1.2.1
+ * Generated: 2019-04-10
+ * Version: 2.0.0-beta0
  * License: MIT
@@ -9,6 +9,11 @@ * Author: livelybone([e-mail])
 
-import { base64ToBlob, blobToBase64 } from 'base64-blob';
+import { blobToBase64, base64ToBlob } from 'base64-blob';
 
 /* global Promise */
-function urlGet(url) {
+
+/**
+ * @param   { String }    url
+ * @return  { Promise }
+ * */
+function getSizeOfUrl(url) {
   return new Promise(function (res, rej) {
@@ -23,5 +28,5 @@ var img = document.createElement('img');
     img.onerror = function () {
-      rej(new Error('Image loaded error'));
+      rej(new Error('Image<' + url + '> loaded error'));
     };
-    
+
     img.src = url;
@@ -32,12 +37,38 @@ if (img.complete) loaded();
 
-function getNaturalSize(url) {
-  return new Promise(function (res) {
-    if (typeof url === 'string') {
-      res(urlGet(url));
-    } else {
-      if (url.naturalWidth) {
-        res({ width: url.naturalWidth, height: url.naturalHeight });
+/**
+ * Determine if the canvas is available
+ * */
+var canvasSupport = (function () {
+  var canvas = document.createElement('canvas');
+  return !!canvas.getContext
+})();
+
+/* global Promise */
+
+/**
+ * @param   { String|Image|File|FileList|Blob }   img
+ * @return  { Promise }
+ * */
+function getNaturalSize(img) {
+  return new Promise(function (res, rej) {
+    if (typeof img === 'string') {
+      res(getSizeOfUrl(img));
+    } else if (img instanceof Image) {
+      if (img.naturalWidth) {
+        res({ width: img.naturalWidth, height: img.naturalHeight });
       } else {
-        res(urlGet(url.src));
+        res(getSizeOfUrl(img.src));
       }
+    } else if (
+      img instanceof FileList
+      || img instanceof File
+      || img instanceof Blob
+    ) {
+      var f = img[0] || img;
+      res(getSizeOfUrl(blobToBase64(f)));
+    } else {
+      rej(new Error(
+        'The type of param `img` is not matched.' +
+        ' It should be an instance of one of the String, Image, File, FileList and Blob'
+      ));
     }
@@ -49,21 +80,39 @@ })
 
-function canvasSupport() {
-  var canvas = document.createElement('canvas');
-  return !!canvas.getContext
-}
+/**
+ * @param   { File|Blob }   imgFile
+ * @param   { Object }      [compressOptions]
+ * @param   { String }      compressOptions.compressType      default to 'scale'
+ * @param   { Number }      compressOptions.scale             default to 1
+ * @param   { Number }      compressOptions.imageSize         default to 0
+ * @param   { String }      compressOptions.imageType         default to the type of `imgFile` or 'image/png'
+ * @param   { Number }      compressOptions.quality           default to 0.8
+ * @param   { Boolean }     compressOptions.toBlob            default to true
+ * @return  { Promise }
+ * */
+function imgCompress(imgFile, compressOptions) {
+  if (!canvasSupport) {
+    return Promise.reject(new Error('Canvas is not supported in your browser'))
+  }
 
-function imgMinify(imgFile, minifyOptions) {
-  if (!canvasSupport()) return Promise.reject(new Error('Canvas is not supported in your browser'))
+  if (!(imgFile instanceof File || imgFile instanceof Blob)) {
+    return Promise.reject(new Error(
+      'The type of param `imgFile` is not matched' +
+      ' It should be an instance of one of the File and Blob'
+    ))
+  }
 
-  // fixedSize: After comparing width with height of the image, set the value of which is smaller than another to the fixed value
-  var compressTypes = ['scale', 'fixedWidth', 'fixedHeight', 'fixedSize'];
+  var compressTypes = [
+    'scale',        // Resize the image by `options.scale`
+    'fixedWidth',   // Set the width of the image to a fixed value -- `options.imageSize`
+    'fixedHeight',  // Set the height of the image to a fixed value -- `options.imageSize`
+    'fixedSize',    // Set the smaller between width and height of the image to a fixed value -- `options.imageSize`
+  ];
 
   var defaultOptions = {
-    compressType: 'scale', // compress type, options: `compressTypes`
-    scale: 1, // scale factor, usable when compressType is `scale`
-    width: 0, // if it is `0`, it means auto-computed, usable when compressType is `fixedWidth`
-    height: 0, // if it is `0`, it means auto-computed, usable when compressType is `fixedHeight`
-    size: 0, // min size value, usable when compressType is `fixedSize`
-    quality: .8, // compress quality
-    toBlob: true, // if it is false, the function will resolve to base64 string
+    compressType: compressTypes[0],           // Compress type, options: `compressTypes`
+    scale: 1,                                 // Scale factor, works when compressType is `scale`
+    imageSize: 0,                             // The fixed value of size, works when compressType is `fixedWidth`, `fixedHeight` or `fixedSize`. If imageSize is 0, it means convert to naturalSize
+    imageType: imgFile.type || 'image/png',   // The mine type of image returned
+    quality: .8,                              // Compress quality, works when imageType is `image/jpeg` or `image/webp`
+    toBlob: true,                             // If it is false, the promise returned will be resolved with a base64 string
   };
@@ -73,44 +122,56 @@
 
-  if (minifyOptions) {
+  // Merge options
+  if (compressOptions) {
     Object.keys(defaultOptions).forEach(function (key) {
-      options[key] = minifyOptions[key] !== undefined ? minifyOptions[key] : defaultOptions[key];
+      options[key] = compressOptions[key] !== undefined
+        ? compressOptions[key] : defaultOptions[key];
     });
   }
 
-  return blobToBase64(imgFile).then(function (url) {
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-    return getNaturalSize(url).then(function (size) {
-      var width = size.width;
-      var height = size.height;
-      var cWidth, cHeight;
-      if (options.compressType === compressTypes[1]) {
-        cWidth = options.width;
-        cHeight = options.width * height / width;
-      } else if (options.compressType === compressTypes[2]) {
-        cHeight = options.height;
-        cWidth = options.height * width / height;
-      } else if (options.compressType === compressTypes[3]) {
-        if (width > height) {
-          cHeight = options.size;
-          cWidth = options.size * width / height;
-        } else {
-          cWidth = options.size;
-          cHeight = options.size * height / width;
-        }
-      } else {
-        cWidth = width * options.scale;
-        cHeight = height * options.scale;
-      }
-      canvas.width = cWidth;
-      canvas.height = cHeight;
-      var img = document.createElement('img');
-      img.src = url;
-      ctx.drawImage(img, 0, 0, cWidth, cHeight);
-      var result = canvas.toDataURL('image/jpeg', options.quality);
-      return options.toBlob ? base64ToBlob(result) : result
+  return blobToBase64(imgFile)
+    .then(function (url) {
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext('2d');
+
+      return getNaturalSize(url)
+        .then(function (size) {
+          var width = size.width;
+          var height = size.height;
+
+          var cWidth, cHeight;
+
+          // Calculate `cWidth`, `cHeight`
+          if (options.compressType === compressTypes[1]) {
+            cWidth = options.imageSize || width;
+            cHeight = cWidth * height / width;
+          } else if (options.compressType === compressTypes[2]) {
+            cHeight = options.imageSize || height;
+            cWidth = cHeight * width / height;
+          } else if (options.compressType === compressTypes[3]) {
+            if (width > height) {
+              cHeight = options.imageSize || height;
+              cWidth = cHeight * width / height;
+            } else {
+              cWidth = options.imageSize || width;
+              cHeight = cWidth * height / width;
+            }
+          } else {
+            cWidth = width * options.scale;
+            cHeight = height * options.scale;
+          }
+
+          var img = document.createElement('img');
+          img.src = url;
+
+          // Draw image in canvas
+          canvas.width = cWidth;
+          canvas.height = cHeight;
+          ctx.drawImage(img, 0, 0, cWidth, cHeight);
+
+          var result = canvas.toDataURL(options.imageType, options.quality);
+          return options.toBlob ? base64ToBlob(result) : result
+        })
     })
-  })
 }
 
-export { getNaturalSize, imgMinify };
+export { canvasSupport, getNaturalSize, getSizeOfUrl, imgCompress };

lib/umd/getNaturalSize.js

 /**
  * Bundle of img-about
- * Generated: 2019-01-07
- * Version: 1.2.1
+ * Generated: 2019-04-10
+ * Version: 2.0.0-beta0
  * License: MIT
@@ -9,2 +9,2 @@ * Author: livelybone([e-mail])
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.getNaturalSize=t()}(this,function(){"use strict";function n(o){return new Promise(function(e,t){var n=document.createElement("img"),i=function(){e({width:n.width,height:n.height})};n.onload=i,n.onerror=function(){t(new Error("Image loaded error"))},n.src=o,n.complete&&i()})}return function(t){return new Promise(function(e){"string"==typeof t?e(n(t)):t.naturalWidth?e({width:t.naturalWidth,height:t.naturalHeight}):e(n(t.src))})}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).getNaturalSize=t()}(this,function(){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var e;t=e={exports:{}},n=function(){return function(e,t,n){t=t||"",n=n||512;for(var o=atob(e),r=[],i=0;i<o.length;i+=n){for(var a=o.slice(i,i+n),f=new Array(a.length),l=0;l<a.length;l++)f[l]=a.charCodeAt(l);var u=new Uint8Array(f);r.push(u)}return new Blob(r,{type:t})}},t.exports?(t.exports=n(),t.exports.default=t.exports):window.b64toBlob=n();var t,n;function o(r){return new Promise(function(e,t){var n=document.createElement("img"),o=function(){e({width:n.width,height:n.height})};n.onload=o,n.onerror=function(){t(new Error("Image<"+r+"> loaded error"))},n.src=r,n.complete&&o()})}document.createElement("canvas").getContext;return function(n){return new Promise(function(e,t){"string"==typeof n?e(o(n)):n instanceof Image?n.naturalWidth?e({width:n.naturalWidth,height:n.naturalHeight}):e(o(n.src)):n instanceof FileList||n instanceof File||n instanceof Blob?e(o(function(o){return new Promise(function(t,n){try{var e=new FileReader;e.onload=function(e){t(e.target.result)},e.readAsDataURL(o)}catch(e){n(e)}})}(n[0]||n))):t(new Error("The type of param `img` is not matched. It should be an instance of one of the String, Image, File, FileList and Blob"))})}});

lib/umd/index.js

 /**
  * Bundle of img-about
- * Generated: 2019-01-07
- * Version: 1.2.1
+ * Generated: 2019-04-10
+ * Version: 2.0.0-beta0
  * License: MIT
@@ -9,2 +9,2 @@ * Author: livelybone([e-mail])
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.ImgAbout={})}(this,function(e){"use strict";function r(o){return new Promise(function(e,t){var r=document.createElement("img"),n=function(){e({width:r.width,height:r.height})};r.onload=n,r.onerror=function(){t(new Error("Image loaded error"))},r.src=o,r.complete&&n()})}function o(t){return new Promise(function(e){"string"==typeof t?e(r(t)):t.naturalWidth?e({width:t.naturalWidth,height:t.naturalHeight}):e(r(t.src))})}"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var t,h=(function(e){var t;t=function(){return function(e,t,r){t=t||"",r=r||512;for(var n=atob(e),o=[],i=0;i<n.length;i+=r){for(var a=n.slice(i,i+r),s=new Array(a.length),c=0;c<a.length;c++)s[c]=a.charCodeAt(c);var u=new Uint8Array(s);o.push(u)}return new Blob(o,{type:t})}},e.exports?(e.exports=t(),e.exports.default=e.exports):window.b64toBlob=t()}(t={exports:{}},t.exports),t.exports);e.getNaturalSize=o,e.imgMinify=function(e,t){if(!document.createElement("canvas").getContext)return Promise.reject(new Error("Canvas is not supported in your browser"));var n,d=["scale","fixedWidth","fixedHeight","fixedSize"],r={compressType:"scale",scale:1,width:0,height:0,size:0,quality:.8,toBlob:!0},f=r;return t&&Object.keys(r).forEach(function(e){f[e]=void 0!==t[e]?t[e]:r[e]}),(n=e,new Promise(function(t,r){try{var e=new FileReader;e.onload=function(e){t(e.target.result)},e.readAsDataURL(n)}catch(e){r(e)}})).then(function(s){var c=document.createElement("canvas"),u=c.getContext("2d");return o(s).then(function(e){var t,r,n=e.width,o=e.height;f.compressType===d[1]?(t=f.width,r=f.width*o/n):f.compressType===d[2]?(r=f.height,t=f.height*n/o):f.compressType===d[3]?o<n?(r=f.size,t=f.size*n/o):(t=f.size,r=f.size*o/n):(t=n*f.scale,r=o*f.scale),c.width=t,c.height=r;var i=document.createElement("img");i.src=s,u.drawImage(i,0,0,t,r);var a=c.toDataURL("image/jpeg",f.quality);return f.toBlob?function(e){try{var t=e.split(","),r=t[0].match(/:(.*?);/)[1];return Promise.resolve(h(t[1],r))}catch(e){return Promise.reject(e)}}(a):a})})},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ImgAbout={})}(this,function(e){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var t,d=(function(e){var t;t=function(){return function(e,t,n){t=t||"",n=n||512;for(var o=atob(e),r=[],i=0;i<o.length;i+=n){for(var a=o.slice(i,i+n),s=new Array(a.length),c=0;c<a.length;c++)s[c]=a.charCodeAt(c);var f=new Uint8Array(s);r.push(f)}return new Blob(r,{type:t})}},e.exports?(e.exports=t(),e.exports.default=e.exports):window.b64toBlob=t()}(t={exports:{}},t.exports),t.exports);function o(o){return new Promise(function(t,n){try{var e=new FileReader;e.onload=function(e){t(e.target.result)},e.readAsDataURL(o)}catch(e){n(e)}})}function r(r){return new Promise(function(e,t){var n=document.createElement("img"),o=function(){e({width:n.width,height:n.height})};n.onload=o,n.onerror=function(){t(new Error("Image<"+r+"> loaded error"))},n.src=r,n.complete&&o()})}var i=!!document.createElement("canvas").getContext;function a(n){return new Promise(function(e,t){if("string"==typeof n)e(r(n));else if(n instanceof Image)n.naturalWidth?e({width:n.naturalWidth,height:n.naturalHeight}):e(r(n.src));else if(n instanceof FileList||n instanceof File||n instanceof Blob){e(r(o(n[0]||n)))}else t(new Error("The type of param `img` is not matched. It should be an instance of one of the String, Image, File, FileList and Blob"))})}e.canvasSupport=i,e.getNaturalSize=a,e.getSizeOfUrl=r,e.imgCompress=function(e,t){if(!i)return Promise.reject(new Error("Canvas is not supported in your browser"));if(!(e instanceof File||e instanceof Blob))return Promise.reject(new Error("The type of param `imgFile` is not matched It should be an instance of one of the File and Blob"));var l=["scale","fixedWidth","fixedHeight","fixedSize"],n={compressType:l[0],scale:1,imageSize:0,imageType:e.type||"image/png",quality:.8,toBlob:!0},u=n;return t&&Object.keys(n).forEach(function(e){u[e]=void 0!==t[e]?t[e]:n[e]}),o(e).then(function(s){var c=document.createElement("canvas"),f=c.getContext("2d");return a(s).then(function(e){var t,n,o=e.width,r=e.height;u.compressType===l[1]?n=(t=u.imageSize||o)*r/o:u.compressType===l[2]?t=(n=u.imageSize||r)*o/r:u.compressType===l[3]?r<o?t=(n=u.imageSize||r)*o/r:n=(t=u.imageSize||o)*r/o:(t=o*u.scale,n=r*u.scale);var i=document.createElement("img");i.src=s,c.width=t,c.height=n,f.drawImage(i,0,0,t,n);var a=c.toDataURL(u.imageType,u.quality);return u.toBlob?function(e){try{var t=e.split(","),n=t[0].match(/:(.*?);/)[1];return Promise.resolve(d(t[1],n))}catch(e){return Promise.reject(e)}}(a):a})})},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "img-about",
-  "version": "1.2.1",
-  "description": "A module for image deal, includes getting naturalSize, minifying in browser",
+  "version": "2.0.0-beta0",
+  "description": "A module for image processing in browser, includes getting naturalSize, zooming, compressing... wrapped by Promise",
   "main": "./lib/umd/index.js",
@@ -10,4 +10,6 @@ "module": "./lib/es/index.js",
     "build": "rimraf ./lib && cross-env NODE_ENV=production rollup -c",
-    "eslint": "eslint ./src",
-    "test": "npm run build && mocha ./test/index.spec.js"
+    "eslint": "eslint ./src --fix",
+    "test": "npm run build && mocha ./test/index.spec.js",
+    "changelog": "npx conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "commit": "git-cz"
   },
@@ -21,4 +23,7 @@ "repository": {
     "img",
-    "naturalWidth/naturalHeight",
-    "minify",
+    "naturalSize",
+    "naturalWidth",
+    "naturalHeight",
+    "zoom",
+    "scale",
     "compress",
@@ -34,14 +39,22 @@ "browser"
   "devDependencies": {
+    "commitizen": "^3.0.7",
+    "conventional-changelog-cli": "^2.0.12",
+    "cz-conventional-changelog": "^2.1.0",
     "eslint": "^5.3.0",
     "mocha": "^5.2.0",
-    "rollup": "^0.65.0",
-    "rollup-plugin-commonjs": "^9.1.6",
-    "rollup-plugin-license": "^0.7.0",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-uglify": "^5.0.2"
+    "rollup": "^1.9.0",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-license": "^0.8.1",
+    "rollup-plugin-node-resolve": "^4.2.1",
+    "rollup-plugin-uglify": "^6.0.2"
   },
   "dependencies": {
-    "@livelybone/copy": "^2.5.0",
-    "base64-blob": "^1.2.1"
+    "@livelybone/copy": "^2.5.4",
+    "base64-blob": "^1.3.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

README.md

 # img-about
 [![NPM Version](http://img.shields.io/npm/v/img-about.svg?style=flat-square)](https://www.npmjs.com/package/img-about)
 [![Download Month](http://img.shields.io/npm/dm/img-about.svg?style=flat-square)](https://www.npmjs.com/package/img-about)
-![gzip with dependencies: 1kb](https://img.shields.io/badge/gzip--with--dependencies-1kb-brightgreen.svg "gzip with dependencies: 1kb")
+![gzip with dependencies: 1.3kb](https://img.shields.io/badge/gzip--with--dependencies-1.3kb-brightgreen.svg "gzip with dependencies: 1.3kb")
 ![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")
@@ -9,4 +9,6 @@
 
-A module for image deal, includes getting naturalSize, minifying in browser
+A module for image processing in browser, includes getting naturalSize, zooming, compressing... wrapped by Promise
 
+You may need a Promise polyfill while use old IE browser( >= IE9 )
+
 ## repository
@@ -28,3 +30,3 @@ https://github.com/livelybone/img-about.git
 ```js
-import {getNaturalSize, imgMinify} from 'img-about';
+import {getNaturalSize, imgCompress} from 'img-about';
 ```
@@ -48,31 +50,31 @@
 ### getNaturalSize
-> `(url: [String, Image]) => Promise<Object: {width, height}>`
+> `(url: String|Image|File|FileList|Blob) => Promise<Object: {width, height}>`
 
-### imgMinify
-> `(imgFile: [File, Blob], minifyOptions: MinifyOptions) => Promise<[Blob, String]>`
+### imgCompress
+> `(imgFile: File|Blob, compressOptions: CompressOptions) => Promise<Blob|String>`
 
 ```js
-/**
- * @element fixedSize: After comparing width with height of the image, it will set the value of which is smaller than another to the fixed value
- * */
-var compressTypes = ['scale', 'fixedWidth', 'fixedHeight', 'fixedSize']
+var compressTypes = [
+    'scale',        // Resize the image by `options.scale`
+    'fixedWidth',   // Set the width of the image to a fixed value -- `options.imageSize`
+    'fixedHeight',  // Set the height of the image to a fixed value -- `options.imageSize`
+    'fixedSize',    // Set the smaller between width and height of the image to a fixed value -- `options.imageSize`
+  ]
 
 /**
- * @key {String} compressType, default to `scale`, options: `compressTypes`
- * @key {Number} scale, default to `1`, range: `0-1` usable when compressType is `scale`
- * @key {Number} width, default to `0`, if it is `0`, it means auto-computed, usable when compressType is `fixedWidth`
- * @key {Number} height, default to `0`, if it is `0`, it means auto-computed, usable when compressType is `fixedHeight`
- * @key {Number} size, default to `0`, the fixed value, usable when compressType is `fixedSize`
- * @key {Number} quality, default to `.8`, compress quality
- * @key {Boolean} toBlob, default to `true`, if it is false, the function will resolve to base64 string
+ * @property   { String }      compressOptions.compressType      default to 'scale'
+ * @property   { Number }      compressOptions.scale             default to 1
+ * @property   { Number }      compressOptions.imageSize         default to 0
+ * @property   { String }      compressOptions.imageType         default to default to the type of `imgFile` or 'image/png'
+ * @property   { Number }      compressOptions.quality           default to 0.8
+ * @property   { Boolean }     compressOptions.toBlob            default to true
  * */
-const MinifyOptions = {
-  compressType: 'scale',
-  scale: 1,
-  width: 0,
-  height: 0,
-  size: 0,
-  quality: .8,
-  toBlob: true,
+var defaultOptions = {
+  compressType: compressTypes[0],           // Compress type, options: `compressTypes`
+  scale: 1,                                 // Scale factor, works when compressType is `scale`
+  imageSize: 0,                             // The fixed value of size, works when compressType is `fixedWidth`, `fixedHeight` or `fixedSize`. If imageSize is 0, it means convert to naturalSize
+  imageType: imgFile.type || 'image/png',   // The mine type of image returned
+  quality: .8,                              // Compress quality, works when imageType is `image/jpeg` or `image/webp`
+  toBlob: true,                             // If it is false, the promise returned will be resolved with a base64 string
 }
 ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19967

increased by43.89%

Number of package files

8

increased by14.29%

Lines of code

206

increased by49.28%

Number of lines in readme file

78

increased by2.63%

Worsened metrics

Dev dependency count

10

increased by42.86%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@livelybone/copy@^2.5.4

• Updatedbase64-blob@^1.3.0