Skip to content
Smartly resize/crop images in the browser prior to upload
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src output canvas when outputFormat === 'canvas' Oct 7, 2018
.editorconfig ES6 module version Dec 26, 2017
.eslintrc ES6 module version Dec 26, 2017
.gitignore
LICENSE ES6 module version Dec 26, 2017
README.md 📖 update contributing rules Mar 7, 2019
package-lock.json update npm pre-publish script & deps version Oct 7, 2018
package.json 🚑 add exit 0 if no git dir for npm not to error Mar 26, 2019
rollup.config.js use import instead of require Jan 10, 2018

README.md

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 file
  • options 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)
  • 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.

To maintain things clear and visual, please follow the git commit template.

You can’t perform that action at this time.