README
resize-image
Efficiently resize and/or crop images in browser thanks to HTML5 canvas. Cropping is automatically adjusted in a smart way thanks to smartcrop.
Why waste time on network transfer when you can compress in the browser?
Installation & usage
npm install smart-img-resize
// require using commonJS
const resizeImage = require('smart-img-resize');
// or in es6, using a module bundler like rollup or webpack
import resizeImage from 'smart-img-resize';
// get your input file (it has id="upload-image")
const inputFile = document.getElementById('upload-image');
// get the actual file object from your input field as soon as a file is selected
inputFile.onchange = function () {
const img = inputFile.files[0];
resizeImage(img, {
outputFormat: 'jpeg',
targetWidth: 200,
targetHeight: 200,
crop: true
}, (err, b64img) => {
if (err) {
console.error(err);
return;
}
// do what you have to with the b64img
});
};
Parameters
The function takes three arguments:
img
– the image as a file object from input fileoptions
object- {string}
outputFormat
– (jpe?g|png|canvas), canvas => canvas element, others => dataURI - {string}
targetWidth
- {string}
targetHeight
- {bool}
crop
– if true, (smartly) crop image to the desired dimensions (optional) - {bool}
forceRatio
– if true, force dimensions without regard to the aspect ratio (optional)
- {string}
callback
Note that crop
and forceRatio
are mutually exclusive
Contributing
There's sure room for improvement, so feel free to hack around and submit PRs! Please just follow the style of the existing code, which is Airbnb's style with minor modifications.