browser-image-manipulation

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

$3

``
npm install browser-image-manipulation --save
`

$3

Open (see in /examples)

$3

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)

$3

One format:
`js
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:
`js
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:
`js
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()))
`

$3


#### Minify
Use 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

`

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)
`

$3


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
}
})
`

$3


`

install deps

npm i

run in dev mode

npm run dev
``

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