@meghoshpritam/react-image-file-resizer
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

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 📜

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

    Package Sidebar

    Install

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

    Weekly Downloads

    22

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    14.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • meghoshpritam