JSPM – browser-image-manipulation@0.4.0

Package Exports

browser-image-manipulation
browser-image-manipulation/dist/browser-image-manipulation.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (browser-image-manipulation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

browser-image-manipulation

Convert and manipulate image on JS in browser. Fluent interface based, at end returning promise.

Install

npm install browser-image-manipulation --save

Examples

Open (see in /examples)

Features

Load image in formats:

blob (optional, with image orientation detect and correct rotate)
canvas

Filters:

grayscale
pixelize
gaussian blur (used StackBlur.js)

Manipulations:

rotate
crop
crop to circle with resize
crop to square with resize
resize by max height/max width (used pica for correct resize image)
resize to fit in rectangle (proportion saved, empty space filled by color)
perspective (change perspective of image)

Draw:

draw line
draw polygon
draw rectangle
draw text

Output formats:

blob
canvas
base64 image

Info:

get exif (only for blob)

Usage

One format:

import BrowserImageManipulation from 'browser-image-manipulation'

new BrowserImageManipulation()
   .loadBlob(e.target.files[0], {
       fixOrientation: true // about problem: https://www.howtogeek.com/254830/why-your-photos-dont-always-appear-correctly-rotated/
   })
   .gaussianBlur()
   .saveAsImage()
   .then(base64 => {
      alert('Blured done!')
   })
   .catch(e => alert(e.toString()))

Multi format:

import BrowserImageManipulation from 'browser-image-manipulation'

let picaOptions = {} // optional, see pica options
let iM = new BrowserImageManipulation()
            .loadBlob(e.target.files[0])
            .toCircle(300, {pica: picaOptions})
            .toGrayscale()
            
iM.saveAsBlob().then(blob => {
    if (blob.size > 3000000) {
        return new Error('Max size 3 mb')
    }
    // uploadToServer(blob, 'my circle black and white image')
    return iM.saveAsImage()
}).then(base64 => {
    document.getElementByTag('img')[0].src = base64
}).catch(e => alert(e.toString()))

Fluent interface:

new BrowserImageManipulation()
    .loadBlob(e.target.files[0])
    .toCircle(400)
    .toGrayscale()
    .pixelize()
    .rotate(90)
    .saveAsImage()
    .then(base64 => {
        document.getElementById('exampleFluentImg').src = base64
    }).catch(e => alert(e.toString()))

Increase performance

Minify

Use wasm features in resize methods:

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

But if use UglifyJs/TerserJS set in compress evaluate to false

compress: {
  ...
  evaluate: false
  ...
}

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'] // <--- only js feature
        }
    })

Development

# install deps
npm i

# run in dev mode
npm run dev

and go to /examples/index.html and open in web-browser