browser-image-manipulation - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

package.json

 {
   "name": "browser-image-manipulation",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Convert and manipulate image on JS in browser.",
@@ -38,3 +38,3 @@ "main": "dist/browser-image-manipulation.js",
     "blueimp-canvas-to-blob": "^3.14.0",
-    "pica": "~4.1.1",
+    "pica": "~5.1.0",
     "piexifjs": "^1.0.6",
@@ -44,14 +44,10 @@ "stackblur-canvas": "~2.2.0"
   "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/node": "^7.7.0",
+    "@babel/runtime": "^7.7.2",
+    "@babel/plugin-transform-async-to-generator": "^7.7.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.3.4",
     "@types/jasmine": "^3.3.5",
-    "babel": "^6.23.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-polyfill": "^6.0.16",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.26.0",
+    "babel-eslint": "^10.0.3",
     "canvas": "^2.5.0",
@@ -72,9 +68,9 @@ "cross-env": "^5.2.0",
     "pixelmatch": "^4.0.2",
-    "rollup": "^0.41.6",
-    "rollup-plugin-babel": "^2.7.1",
-    "rollup-plugin-commonjs": "^8.0.2",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-plugin-uglify": "^1.0.2",
-    "rollup-watch": "^3.2.2"
+    "rollup": "^1.26.3",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-buble": "^0.19.2",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.2"
   }
 }

README.md

@@ -96,3 +96,5 @@ ## browser-image-manipulation
 
-If use UglifyJs set in comperss evaluate to false
+### Caveats
+#### Minify
+If use UglifyJs/TerserJS set in compress evaluate to false
 ```
@@ -105,1 +107,46 @@ compress: {
 ```
+Or use only js,wasm features in resize methods:
+```js
+new BrowserImageManipulation()
+    .loadBlob(e.target.files[0])
+    .toCircle(400, {
+        picaInit: {
+            features: ['js', 'wasm'] // <--- set features
+        }
+    })
+    
+new BrowserImageManipulation()
+    .loadBlob(e.target.files[0])
+    .resize(400, 400, {
+        picaInit: {
+            features: ['js', 'wasm'] // <--- set features
+        }
+    }) 
+   
+// ...and etc resize methods    
+
+```
+
+Without that, you can see error like:
+```
+Uncaught ReferenceError: e is not defined
+    at t (217c2170-1eb8-41b8-b91c-c3d57f706ea9:1)
+```
+
+#### Ie 11 support
+For work in ie 11 you need some polyfils from core-js
+```
+import 'core-js/modules/es.object.assign'
+import 'core-js/modules/es.promise'
+import 'core-js/modules/es.array.iterator'
+```
+
+In the versions below, the work was not tested. 
+Perhaps everything will work if you add polyfills and use only js features:
+```
+.resize(400, 400, {
+        picaInit: {
+            features: ['js'] // <--- set only js feature
+        }
+    }) 
+``` 

src/manipulations/imageResize.js

@@ -46,3 +46,4 @@ import Pica from 'pica/dist/pica'
     let resizeOptions = Object.assign({
-        pica: {}
+        pica: {},
+        picaInit: {}
     }, options)
@@ -84,3 +85,3 @@
 
-        let picaInstanse = new Pica()
+        let picaInstanse = new Pica(resizeOptions.picaInit)
         picaInstanse.resize(canvasImage, canvas, resizeOptions.pica).then(resizedCanvas => {
@@ -87,0 +88,0 @@ if (type === RESIZE_TYPE_SQUARE) {

types/index.d.ts

@@ -6,10 +6,10 @@ declare module "browser-image-manipulation"{
         loadCanvas(canvas: HTMLCanvasElement, saveAsFileName?: string): this;
-        toSquare(length: number, opts?: Object): this;
-        resize(maxWidth: number, maxHeight: number, opts?: Object): this;
-        rotate(degrees: number, opts?: Object): this;
-        toGrayscale(opts?: Object): this;
+        toSquare(length: number, opts?: ResizeOptions): this;
+        resize(maxWidth: number, maxHeight: number, opts?: ResizeOptions): this;
+        rotate(degrees: number, opts?: RotateOptions): this;
+        toGrayscale(opts?: GrayscaleOptions): this;
         pixelize(threshold?: number): this;
         gaussianBlur(radius?: number): this;
-        centerInRectangle(maxWidth: number, maxHeight: number, opts?: Object): this;
-        toCircle(diametr: number, opts?: Object): this;
+        centerInRectangle(maxWidth: number, maxHeight: number, opts?: CenterInRectOptions): this;
+        toCircle(diametr: number, opts?: CircleOptions): this;
         saveAsBlob(mimeType?: string, q?: string): Promise<File>;
@@ -35,2 +35,43 @@ saveAsCanvas(): Promise<HTMLCanvasElement>;
 
+interface ResizeOptions {
+    pica?: ResizeOptionsPica;
+    picaInit?: ResizeOptionsPicaInit;
+}
+
+interface ResizeOptionsPica {
+    quality?: number; // 0..3. Default = 3 (lanczos, win=3)
+    alpha?: number; // use alpha channel. Default = false.
+    unsharpAmount?: number; //  >=0, in percents. Default = 0 (off). Usually between 50 to 100 is good.
+    unsharpRadius?: number; // 0.5..2.0. By default it's not set. Radius of Gaussian blur. If it is less than 0.5, Unsharp Mask is off. Big values are clamped to 2.0.
+    unsharpThreshold?: number; //  0..255. Default = 0. Threshold for applying unsharp mask.
+}
+
+interface ResizeOptionsPicaInit {
+    tile?: number; // tile width/height. Images are processed by regions, to restrict peak memory use. Default 1024
+    features?: Array<string>; //  list of features to use. Default is [ 'js', 'wasm', 'ww' ]. Can be [ 'js', 'wasm', 'cib', 'ww' ] or [ 'all' ]. Note, resize via createImageBitmap() ('cib') disabled by default due problems with quality.
+    idle?: number; // cache timeout, ms. Webworkers create is not fast. This option allow reuse webworkers effectively. Default 2000.
+    concurrency?: number; // max webworkers pool size. Default is autodetected CPU count, but not more than 4.
+}
+
+interface CenterInRectOptions extends ResizeOptions {
+    bgColor?: string; // default white
+}
+
+interface CircleOptions extends ResizeOptions {
+    padding?: number; // default 4
+    bgColor?: string; // default white
+}
+
+interface RotateOptions {
+    padding?: number; // default 0
+    bgColor?: string; // default white
+}
+
+interface GrayscaleOptions {
+    // used luma coding: https://en.wikipedia.org/wiki/Grayscale#Luma_coding_in_video_systems
+    rQ?: number; // default 0.34
+    gQ?: number; // default 0.5
+    bQ?: number; // default 0.16
+}
+
 interface DrawTextStyle {
@@ -37,0 +78,0 @@ font?: string; // for example 'serif bold'

No alert changes

Improved metrics

Total package byte prevSize

494723

increased by0.69%

Dev dependency count

29

decreased by-12.12%

Lines of code

1543

increased by2.19%

Number of lines in readme file

151

increased by45.19%

Dependency changes

• + Addedmultimath@2.0.0(transitive)

• + Addedpica@5.1.1(transitive)

• - Removedmultimath@1.0.3(transitive)

• - Removedpica@4.1.1(transitive)

• Updatedpica@~5.1.0