React Image File Resizer 🌄✨

@meghoshpritam/react-image-file-resizer is your go-to magic wand for enhancing your React application with image resizing capabilities. 🚀

• Transform images effortlessly by altering their width, height, format, rotation, and quality.
• Obtain the resized image in either base64 URI or Blob format. The URI is perfect for directly sourcing images in your <Image> component.

Quick Setup

Start by installing this enchanting package:

npm install @meghoshpritam/react-image-file-resizer

or

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

or

pnpm install @meghoshpritam/react-image-file-resizer

Casting Spells with Magic Resizing

import Resizer from "@meghoshpritam/react-image-file-resizer";

Resizer.imageFileResizer({
  file, // The image file to be resized.
  maxWidth, // The maximum width for the new image.
  maxHeight, // The maximum height for the new image.
  compressFormat, // The image format for compression (JPEG, PNG, or WEBP).
  quality, // The quality of the resized image.
  rotation, // The degree of clockwise rotation to apply to the image.
  responseUriFunc, // The callback function for the resized image URI.
  outputType, // The output type for the resized image.
  minWidth, // The minimum width for the new image.
  minHeight, // The minimum height for the new image.
  keepAspectRatio, // Whether to maintain the aspect ratio of the resized image.
});

Captivating Examples

Example 1

Begin by invoking the resizer:

import Resizer from "@meghoshpritam/react-image-file-resizer";

const resizeFile = (file) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer({
      file,
      maxWidth: 300,
      maxHeight: 300,
      compressFormat: "JPEG",
      quality: 100,
      rotation: 0,
      keepAspectRatio: true,
      responseUriFunc: (uri) => {
        resolve(uri);
      },
      outputType: "base64"
  });
});

Now, wield your powers within an 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

Behold, a React sorcerer at work:

import React, { Component } from "react";
import Resizer from "@meghoshpritam/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({
          file: event.target.files[0],
          maxWidth: 300,
          maxHeight: 300,
          compressFormat: "JPEG",
          quality: 100,
          rotation: 0,
          keepAspectRatio: true,
          responseUriFunc: (uri) => {
            console.log(uri);
            this.setState({ newImage: uri });
          },
          outputType: "base64",
          minWidth: 200,
          minHeight: 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;

Witness the Magic! 🔮

Enchanting Options

| Option | Description | Type | Required | | ----------------- | ---------------------------------------------------------------------------------------------- | ---------- | -------- | | file | Path of the image file | object | Yes | | maxWidth | The new image's maximum width (aspect ratio is preserved) | number | Yes | | maxHeight | The new image's maximum height (aspect ratio is preserved) | number | Yes | | compressFormat | The compression format for the image (JPEG, PNG, or WEBP) | string | Yes | | quality | A number between 0 and 100, used for JPEG compression (set to 100 if no compression is needed) | number | Yes | | rotation | The degree of clockwise rotation to apply to the image (limited to multiples of 90 degrees) | number | Yes | | responseUriFunc | The callback function for the URI of the resized image (e.g., uri => {console.log(uri)}) | function | Yes | | outputType | The output type for the resized image (base64, blob, or file) | string | No | | minWidth | The new image's minimum width (aspect ratio is preserved, defaults to null) | number | No | | minHeight | The new image's minimum height (aspect ratio is preserved, defaults to null) | number | No | | keepAspectRatio | Whether to maintain the aspect ratio of the image (defaults to true) | boolean | Yes |

License

MIT License 📜