@peacechen/react-image-file-resizer

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

or

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 🚧

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