@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.
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
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.
});
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);
}
};
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! 🔮
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 |