React Image File Resizer

react-image-file-resizer is a react module that can rescaled local images.

• You can change image's width, height, format, rotation and quality.
• It returns resized image's new base64 URI or Blob. The URI can be used as the source of an <Image> component.

Setup

Install the package:

npm i react-image-file-resizer

or

yarn add react-image-file-resizer

Usage

import Resizer from 'react-image-file-resizer';

Resizer.imageFileResizer(
    file, // Is the file of the image which will resized.
    maxWidth, // Is the maxWidth of the resized new image.
    maxHeight, // Is the maxHeight of the resized new image.
    compressFormat, // Is the compressFormat of the resized new image.
    quality, // Is the quality of the resized new image.
    rotation, // Is the degree of clockwise rotation to apply to uploaded image. 
    responseUriFunc,  // Is the callBack function of the resized new image URI.
    outputType,  // Is the output type of the resized new image.
    minWidth, // Is the minWidth of the resized new image.
    minHeight, // Is the minHeight of the resized new image.
    );

Example 1

First, wrap this resizer:

const resizeFile = (file) => new Promise(resolve => {
    Resizer.imageFileResizer(file, 300, 300, 'JPEG', 100, 0,
    uri => {
      resolve(uri);
    },
    'base64'
    );
});

And then use it in your async function:

const onChange = async (event) => {
    try {
        const file = event.target.files[0];
        const image = await resizeFile(file);
        console.log(image);
    } catch(err) {
        console.log(err);
    }

}

Example 2

import React, { Component } from 'react';
import Resizer from 'react-image-file-resizer';

class App extends Component {
    constructor(props) {
        super(props);
        this.fileChangedHandler = this.fileChangedHandler.bind(this);
        this.state = {
          newImage: ''
        }
    }

    fileChangedHandler(event) {
        var fileInput = false
        if(event.target.files[0]) {
            fileInput = true
        }
        if(fileInput) {
            try {
                Resizer.imageFileResizer(
                event.target.files[0],
                300,
                300,
                'JPEG',
                100,
                0,
                uri => {
                    console.log(uri)
                    this.setState({ newImage: uri })
                },
                'base64',
                200,
                200,
                );
            }   catch(err) {
                    console.log(err)
            }
        }
    }

    render() {
        return (
            <div className="App">
                <input type="file" onChange={this.fileChangedHandler}/>
                <img src={this.state.newImage} alt=''/>
            </div>
        );
    }
}

export default App;

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):

🚧

🚧

🚧

Shubham Zanwar 📖

🚧

🚧

🚧

This project follows the all-contributors specification. Contributions of any kind welcome!