React Image File Resizer

@peacechen/react-image-file-resizer is a react module that resizes images in the browser.

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

v1.0.0 Breaking Changes

This project has been converted to TypeScript with a generated type definition file.
The main method imageFileResizer accepts an options object argument instead of multiple individual arguments.
It returns a Promise instead of using a callback.

Publication notes

This fork has been published as @peacechen/react-image-file-resizer pending merge into the parent project.

Setup

Install the package:

npm i @peacechen/react-image-file-resizer

yarn add @peacechen/react-image-file-resizer

Usage

import { imageFileResizer } from "@peacechen/react-image-file-resizer";

const newImage = await imageFileResizer({
  compressFormat, // the compression format of the resized image.
  file, // the file of the image to resize.
  maxHeight, // the maxHeight of the resized image.
  maxWidth, // the maxWidth of the resized image.
  minHeight // the minHeight of the resized image.
  minWidth, // the minWidth of the resized image.
  outputType, // the output type of the resized image.
  quality, // the quality of the resized image.
  rotation, // the degree of clockwise rotation to apply to uploaded image.
});

Example

import React, { useState } from "react";
import { imageFileResizer } from "@peacechen/react-image-file-resizer";

export function App() {
  const [newImage, setNewImage] = useState();

  async function fileChangedHandler(event) {
    let fileInput = event.target.files[0];
    if (fileInput) {
      try {
        const uri = await imageFileResizer({
          compressFormat: "jpeg",
          file: fileInput,
          maxHeight: 300,
          maxWidth: 300,
          minHeight: 200,
          minWidth: 200,
          outputType: "base64"
          quality: 100,
          rotation: 0,
        });
        console.log(uri);
        setNewImage(uri);
      } catch (err) {
        console.log(err);
      }
    }
  }

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

export default App;

Input Argument Object

Options object	Description	Type	Default	Required
`compressFormat`	Image format: jpeg, png or webp.	`string`	"jpeg"	No
`file`	Image File	`File`		Yes
`maxHeight`	New image max height (ratio is preserved)	`number`		Yes
`maxWidth`	New image max width (ratio is preserved)	`number`		Yes
`minHeight`	New image min height (ratio is preserved unless minHeight === maxHeight)	`number`		No
`minWidth`	New image min width (ratio is preserved unless minWidth === maxWidth)	`number`		No
`outputType`	Output type: base64, blob or file.	`string`	"base64"	No
`quality`	A number between 0 and 100. Used for the JPEG compression. (100 = no compression)	`number`	100	No
`rotation`	Degree of clockwise rotation to apply to the image. Rotation is limited to 0, 90, 180, 270. (0 = no rotation)	`number`	0	No

Return

imageFileResizer returns a promise that resolves to type string | File | Blob depending on the outputType option.

License

MIT

Publishing

npm run build
npm publish

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 🚧