Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
browser-image-manipulation
Advanced tools
Readme
Convert and manipulate image on JS in browser. Fluent interface based, at end returning promise.
npm install browser-image-manipulation --save
Open (see in /examples)
Load image in formats:
Filters:
Manipulations:
Draw:
Output formats:
Info:
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()))
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)
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
}
})
# install deps
npm i
# run in dev mode
npm run dev
and go to /examples/index.html and open in web-browser
FAQs
Convert and manipulate image on JS in browser.
The npm package browser-image-manipulation receives a total of 620 weekly downloads. As such, browser-image-manipulation popularity was classified as not popular.
We found that browser-image-manipulation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.