image navbar

package.json

@@ -15,6 +15,7 @@
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
+    "react-easy-crop": "^5.1.0",
     "react-icon": "^1.0.0",
     "react-model": "^4.3.1",
     "react-scripts": "5.0.1",

src/Profile/cropImage.js

@@ -0,0 +1,45 @@
+const getCroppedImg = (imageSrc, croppedAreaPixels) => {
+    const createImage = (url) =>
+      new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => resolve(image);
+        image.onerror = (error) => reject(error);
+        image.src = url;
+      });
+
+    const getCroppedImg = async (imageSrc, crop) => {
+      const image = await createImage(imageSrc);
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      canvas.width = crop.width;
+      canvas.height = crop.height;
+
+      ctx.drawImage(
+        image,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        0,
+        0,
+        crop.width,
+        crop.height
+      );
+
+      return new Promise((resolve) => {
+        canvas.toBlob((blob) => {
+          if (!blob) {
+            console.error("Canvas is empty");
+            return;
+          }
+          const fileUrl = window.URL.createObjectURL(blob);
+          resolve(fileUrl);
+        }, "image/jpeg");
+      });
+    };
+
+    return getCroppedImg(imageSrc, croppedAreaPixels);
+  };
+
+export default getCroppedImg;

src/Profile/profile.css

@@ -16,6 +16,7 @@
 .profile-header {
   position: relative;
   display: inline-block;
+  margin-bottom: 30px;
 }
 
 .profile-image {
@@ -53,7 +54,7 @@
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 5px;
-  margin-top: 50px;
+  margin-top: 20px;
 }
 
 .profile-mob {
@@ -211,3 +212,70 @@
 .profile-edit-password-button:hover {
   background-color: #4caf4fba;
 }
+
+.profile-cropper
+{
+  position: absolute;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+}
+.profile-crop-button-container
+{
+  position: relative;
+  top: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 50px;
+}
+.profile-cropper-modal button, .profile-image-submit
+{
+  width: 150px;
+  height: 40px;
+  border-radius: 5px;
+  border-color: transparent;
+  font-size: large;
+  font-weight: 500;
+}
+.profile-cropper-modal button:hover, .profile-image-submit:hover
+{
+  cursor: pointer;
+}
+.profile-button-crop
+{
+  background-color: #4CAF50;
+}
+.profile-button-cancel
+{
+  background-color: #c9302c;
+}
+.profile-button-crop:hover
+{
+  background-color: #4caf4f7e;
+}
+.profile-button-cancel:hover
+{
+  background-color: #c9312c8c;
+}
+.profile-cropper-note
+{
+  position: relative;
+  color: red;
+  top: 410px;
+  font-weight: 600;
+}
+.profile-image-submit
+{
+  margin-top: 50px;
+  width: 200px;
+  background-color: #4CAF50;
+}
+.profile-image-submit
+{
+  background-color: #4caf50;
+}
+.profile-image-submit:hover
+{
+  background-color: #4CAF4f7e;
+}