Image crop and preview using reactjs

12-02-2019    Yaswanth    Views 34
 

In this blog, I'll explain about How to crop the images and  preview the cropped Image
I used the npm cropperjs 



 

For easy understanding, I start the application from starting.
Step 1:
From the command line, execute the following:

npx create-react-app image-crop-example

The above command will create a new project with the default template. The default template contains a little more code than we need, so let’s take a moment to clean it up.
Open the project’s src/App.js file and make it look like the following:

import React from 'react';
function App() {
return (
       < div >
         
     
   );
export default App;

React Image Crop and Preview

Step 2:
From the command line, we install the npm 

      npm install cropperjs --save
 

Step 3:
Now write the code as below,

  Custom component file

import React from "react";
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.min.css";
import "./imagecropper.css";

class CroppedImage extends React.Component {
   constructor() {
       super();
       this.state = {
          croppedImg: ""
      };
       this.imageElement = React.createRef();
  }
     componentDidMount() {
       const cropper = new Cropper(this.imageElement.current, {
          zoomable: false,
          scalable: false,
           // aspectRatio: 1,
           crop: () => {
              const canvas = cropper.getCroppedCanvas();
              new Promise((resolve, reject) => {
                   canvas.toBlob(blob => {
                      blob['preview'] = URL.createObjectURL(blob);
                       this.setState({ croppedImg: blob })
                       resolve(blob);
                   }, 'image/jpeg', 1);
               })
               this.setState({ croppedImg: canvas.toDataURL("image/png") });
          }
       });
   }

   render() {
    return (
           < div >
               < div class="img-container" >
                   < img ref={this.imageElement} src={this.props.selectedImage} alt="Source" crossorigin / >
               < /div >
               < img src={this.state.croppedImg} class="img-preview" alt="Destination" / >
          < /div >
       );
   }
}
export default CroppedImage;

React Image Crop and Preview

componentDidMount() {
       const cropper = new Cropper(this.imageElement.current, {
           zoomable: false,
           scalable: false,
           // aspectRatio: 1,
           crop: () => {
               const canvas = cropper.getCroppedCanvas();
               new Promise((resolve, reject) => {
                   canvas.toBlob(blob => {
                       blob['preview'] = URL.createObjectURL(blob);
                       this.setState({ croppedImg: blob })
                       resolve(blob);
                   }, 'image/jpeg', 1);
               })
               this.setState({ croppedImg: canvas.toDataURL("image/png") });
           }
       });
   }
 

In ComponentDidMount ,

this.imageElement.current  refers to image which we crop ,
zoomable: is the Cropping portion zoomable,
scalable:is the Cropping portion scalable,
crop: Its to draw the new Cropped Image, in this, we assign all canvas data to the canvas  which return a promise
In resolving the promise, we assign blob[‘preview’] to display cropped Img
URL.createobjectURL(blob), to create the local link to display

 

CSS File:

.img-container {
 width: 640px;
 height: 480px;
 float: left;
}
 
.img-preview {
 width: 200px;
 height: 200px;
 float: left;
 margin-left: 10px;
}

Use the custom component as :
 <  ImageCrop
                selectedImage={‘https://homepages.cae.wisc.edu/~ece533/images/monarch.png’}
   />

Add Comments

Submit Comments

More Blogs


What is Trade Finance Transaction?

Blockchain Technology In Trade Finance Transactions

Hari Kondlapudi        Views 376
block-chain-transform-your-business

BLOCKCHAIN TO TRANSFORM YOUR BUSINESS

Hari Kondlapudi        Views 345
block-chain-transform-your-business

LOCALIZATION WITH REACT

Hari Kondlapudi        Views 68

Contact Us

Address:

Do Systems Inc,
433 Plaza Real, Suite 275
Boca Raton, FL 33432 

Email: sales@dosystems.com
 
Copyright © Do Systems Inc. All rights reserved.