Crop Image Component in React

Author: Ravi Teja

src/App.css

@@ -0,0 +1,73 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+* {
+    font-family: "Poppins", sans-serif;
+    margin: 0;
+  }
+  
+  .container {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .cropper {
+    position: relative;
+    width: 80vw;
+    height: 90vh;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    border-radius: 8px;
+    overflow: hidden;
+    /* box-shadow: 0px 10px 9px 0px rgba(0, 0, 0, 0.09); */
+  }
+
+  input[type='radio']{
+    accent-color: #1895B0;
+  }
+  
+  .btn {
+    font-size: 1rem;
+    font-weight: 500;
+    color: #ffffff;
+    background: #1895B0;
+    padding: 0.5rem 1.5rem;
+    border-radius: 0.2rem;
+    border: 2px solid #1895B0;
+    cursor: pointer;
+    margin: 1rem;
+  }
+  
+  .btn-outline {
+    background: #ffffff;
+    color: #1895B0;
+    border: 2px solid #1895B0;
+  }
+  
+  .action-btns {
+    padding-bottom: 1rem;
+  }
+
+  .btn-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .cropped-img {
+    width: 300px;
+    height: 300px;
+    object-fit: contain;
+  }
+  
+  .aspect-ratios {
+    display: flex;
+    align-items: center;
+    gap:0.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  

src/App.js renamed to src/App.jsx

@@ -1,29 +1,35 @@
 import React, { useState } from "react";
+import "./App.css";
 import FileInput from "./components/FileInput";
 import ImageCropper from "./components/ImageCropper";
 
 function App() {
-  const [image, setImage] = useState("");
-  const [currentPage, setCurrentPage] = useState("choose-img");
-  const [imgAfterCrop, setImgAfterCrop] = useState("");
+  // Define state variables
+  const [image, setImage] = useState(""); 
+  const [currentPage, setCurrentPage] = useState("choose-img"); 
+  const [imgAfterCrop, setImgAfterCrop] = useState(""); 
 
-  // Invoked when new image file is selected
+  // Callback function when an image is selected
   const onImageSelected = (selectedImg) => {
     setImage(selectedImg);
-    setCurrentPage("crop-img");
+    setCurrentPage("crop-img"); 
   };
 
-  // Generating Cropped Image When Done Button Clicked
+  // Callback function when cropping is done
   const onCropDone = (imgCroppedArea) => {
+
+    // Create a canvas element to crop the image
     const canvasEle = document.createElement("canvas");
     canvasEle.width = imgCroppedArea.width;
     canvasEle.height = imgCroppedArea.height;
 
     const context = canvasEle.getContext("2d");
 
+    // Load the selected image
     let imageObj1 = new Image();
     imageObj1.src = image;
     imageObj1.onload = function () {
+      // Draw the cropped portion of the image onto the canvas
       context.drawImage(
         imageObj1,
         imgCroppedArea.x,
@@ -36,38 +42,41 @@ function App() {
         imgCroppedArea.height
       );
 
+      // Convert the canvas content to a data URL (JPEG format)
       const dataURL = canvasEle.toDataURL("image/jpeg");
 
       setImgAfterCrop(dataURL);
       setCurrentPage("img-cropped");
     };
   };
 
-  // Handle Cancel Button Click
+  // Callback function when cropping is canceled
   const onCropCancel = () => {
     setCurrentPage("choose-img");
-    setImage("");
+    setImage(""); 
   };
 
   return (
     <div className="container">
       {currentPage === "choose-img" ? (
-        <FileInput setImage={setImage} onImageSelected={onImageSelected} />
+        <FileInput onImageSelected={onImageSelected} />
       ) : currentPage === "crop-img" ? (
         <ImageCropper
           image={image}
           onCropDone={onCropDone}
           onCropCancel={onCropCancel}
         />
       ) : (
+        // Display the cropped image and options to crop a new image or start over
         <div>
           <div>
             <img src={imgAfterCrop} className="cropped-img" />
           </div>
 
           <button
             onClick={() => {
-              setCurrentPage("crop-img");
+              // Allow cropping the current image again
+              setCurrentPage("crop-img"); 
             }}
             className="btn"
           >
@@ -76,7 +85,8 @@ function App() {
 
           <button
             onClick={() => {
-              setCurrentPage("choose-img");
+              // Start over by choosing a new image
+              setCurrentPage("choose-img"); 
               setImage("");
             }}
             className="btn"

src/components/FileInput.js renamed to src/components/FileInput.jsx

@@ -3,6 +3,7 @@ import React, { useRef } from "react";
 function FileInput({ onImageSelected }) {
   const inputRef = useRef();
 
+  // Handle the change event when a file is selected
   const handleOnChange = (event) => {
     if (event.target.files && event.target.files.length > 0) {
       const reader = new FileReader();
@@ -19,6 +20,7 @@ function FileInput({ onImageSelected }) {
 
   return (
     <div>
+      {/* Hidden file input element */}
       <input
         type="file"
         accept="image/*"
@@ -27,6 +29,7 @@ function FileInput({ onImageSelected }) {
         style={{ display: "none" }}
       />
 
+      {/* Button to trigger the file input dialog */}
       <button className="btn" onClick={onChooseImg}>
         Choose Image
       </button>

src/components/ImageCropper.js renamed to src/components/ImageCropper.jsx

@@ -2,22 +2,28 @@ import React, { useState } from "react";
 import Cropper from "react-easy-crop";
 
 function ImageCropper({ image, onCropDone, onCropCancel }) {
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  // Define state variables
+  const [crop, setCrop] = useState({ x: 0, y: 0 }); 
   const [zoom, setZoom] = useState(1);
+  
   const [croppedArea, setCroppedArea] = useState(null);
   const [aspectRatio, setAspectRatio] = useState(4 / 3);
 
+  // Callback when cropping is completed
   const onCropComplete = (croppedAreaPercentage, croppedAreaPixels) => {
+    // Store the cropped area in pixels
     setCroppedArea(croppedAreaPixels);
   };
 
+  // Callback when the user changes the aspect ratio
   const onAspectRatioChange = (event) => {
     setAspectRatio(event.target.value);
   };
 
   return (
     <div className="cropper">
       <div>
+        {/* Image Cropper component */}
         <Cropper
           image={image}
           aspect={aspectRatio}
@@ -37,6 +43,7 @@ function ImageCropper({ image, onCropDone, onCropCancel }) {
       </div>
 
       <div className="action-btns">
+        {/* Aspect ratio selection */}
         <div className="aspect-ratios" onChange={onAspectRatioChange}>
           <input type="radio" value={1 / 1} name="ratio" /> 1:1
           <input type="radio" value={5 / 4} name="ratio" /> 5:4
@@ -47,18 +54,21 @@ function ImageCropper({ image, onCropDone, onCropCancel }) {
           <input type="radio" value={3 / 1} name="ratio" /> 3:1
         </div>
 
-        <button className="btn btn-outline" onClick={onCropCancel}>
-          Cancel
-        </button>
+        {/* Buttons for canceling or applying the crop */}
+        <div className="btn-container">
+          <button className="btn btn-outline" onClick={onCropCancel}>
+            Cancel
+          </button>
 
-        <button
-          className="btn"
-          onClick={() => {
-            onCropDone(croppedArea);
-          }}
-        >
-          Done
-        </button>
+          <button
+            className="btn"
+            onClick={() => {
+              onCropDone(croppedArea);
+            }}
+          >
+            Crop & Apply
+          </button>
+        </div>
       </div>
     </div>
   );

src/index.css

@@ -1,60 +0,0 @@
-* {
-  font-family: "Montserrat", sans-serif;
-  margin: 0;
-}
-
-.container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.cropper {
-  position: relative;
-  width: 80vw;
-  height: 90vh;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0px 10px 9px 0px rgba(0, 0, 0, 0.09);
-}
-
-.btn {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #ffffff;
-  background: #1a7ff8;
-  padding: 0.5rem 1.5rem;
-  border-radius: 0.2rem;
-  border: 2px solid #1a7ff8;
-  cursor: pointer;
-  margin: 1rem;
-}
-
-.btn-outline {
-  background: #ffffff;
-  color: #1a7ff8;
-  border: 2px solid #1a7ff8;
-}
-
-.action-btns {
-  padding-bottom: 1rem;
-}
-
-.cropped-img {
-  width: 300px;
-  height: 300px;
-  object-fit: contain;
-}
-
-.aspect-ratios {
-  display: flex;
-  align-items: center;
-  gap:0.5rem;
-  font-size: 1rem;
-  font-weight: 500;
-}