Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Smartly resize/crop images in the browser prior to upload

Topics

Resources

License

Packages

No packages published