React.js Project to Resize Images in Browser Using react-image-file-resizer Library in Javascript

import React, { Component } from "react";
import Resizer from "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(
          event.target.files[0],
          300,
          300,
          "JPEG",
          100,
          0,
          (uri) => {
            console.log(uri);
            this.setState({ newImage: uri });
          },
          "base64",
          200,
          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;

import React, { Component } from "react";

import Resizer from "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(

event.target.files[0],

300,

"JPEG",

100,

(uri) => {

console.log(uri);

this.setState({ newImage: uri });

"base64",

200,

200

);

} catch (err) {

console.log(err);

}

render() {

return (

</div>

);

}

export default App;

Option	Description	Type	Required
`file`	Path of image file	`object`	Yes
`maxWidth`	New image max width (ratio is preserved)	`number`	Yes
`maxHeight`	New image max height (ratio is preserved)	`number`	Yes
`compressFormat`	Can be either JPEG, PNG or WEBP.	`string`	Yes
`quality`	A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100)	`number`	Yes
`rotation`	Degree of clockwise rotation to apply to the image. Rotation is limited to multiples of 90 degrees.(if no rotation is needed, just set it to 0) (0, 90, 180, 270, 360)	`number`	Yes
`responseUriFunc`	Callback function of URI. Returns URI of resized image’s base64 format. ex: `uri => {console.log(uri)});`	`function`	Yes
`outputType`	Can be either base64, blob or file.(Default type is base64)	`string`	No
`minWidth`	New image min width (ratio is preserved, defaults to null)	`number`	No
`minHeight`	New image min height (ratio is preserved, defaults to null)	`number`	No

Related posts:

You Might Also Like

React Router DOM Tutorial | Build a Simple Router in React in 10 Minutes Tutorial For Beginners

Build a React.js Dynamic PDF Invoice or Report Generator in Browser Using TypeScript Full Project For Beginners

Node.js React.js P2P Zoom Clone Video & Text Group Chat Deployed to Heroku Using Socket.io & WebRTC Library in Javascript Full Project For Beginners

Leave a Reply Cancel reply