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 <img> 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 the resizer:

import Resizer from "react-image-file-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>
        <input type="file">
        <img alt="" src="{this.state.newImage}">
      </div>
    );
  }
}

export default App;

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):

Ahmad Maleki 💻 🚧	Martin Vyšňovský 💻 🚧	Nadun Chamikara 💻 🚧	Shubham Zanwar 📖	Onur Önder 💻 🚧	Yunus Emre 💻 🚧	Juan 💻 🚧
Sreang Rathanak 💻 🚧	Andres Rivera 💻 🚧	mmmulani 💻 🚧	Alex-1701 🚧

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