added save and export feature

Author: ResponseTime

backend/routes.go

@@ -1,33 +1,34 @@
 package main
 
 import (
-	"github.com/gin-contrib/gzip"
 	"github.com/gin-contrib/cors"
+	"github.com/gin-contrib/gzip"
 	"github.com/gin-gonic/gin"
 )
 
 func setupRouter() *gin.Engine {
 	router := gin.Default()
 	router.Use(gzip.Gzip(gzip.DefaultCompression))
 	config := cors.DefaultConfig()
-	config.AllowOrigins = []string{"http://localhost:3000"} 
+	config.AllowOrigins = []string{"http://localhost:3000"}
 	config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE"}
-	config.AllowHeaders = append(config.AllowHeaders, "Authorization") 
+	config.AllowHeaders = append(config.AllowHeaders, "Authorization")
 	router.Use(cors.New(config))
 	v1 := router.Group("/api/v1")
 	{
 		v1.POST("/signup", signup)
 		v1.POST("/login", login)
-		v1.POST("/upload",authMiddleware,upload)
-		v1.GET("/undo",undo)
-		v1.GET("/redo",redo)
-		v1.POST("/crop",authMiddleware,crop)
-		v1.POST("/resize",authMiddleware)
-		v1.POST("/rotate",authMiddleware,rotate)
-		v1.POST("/color",authMiddleware)
-		v1.POST("/filter",authMiddleware)
-		v1.GET("/export",authMiddleware)
-		v1.POST("/getImage",authMiddleware,getImage)
+		v1.POST("/upload", authMiddleware, upload)
+		v1.GET("/undo", undo)
+		v1.GET("/redo", redo)
+		v1.POST("/crop", authMiddleware, crop)
+		v1.POST("/resize", authMiddleware)
+		v1.POST("/rotate", authMiddleware, rotate)
+		v1.POST("/color", authMiddleware)
+		v1.POST("/filter", authMiddleware)
+		v1.GET("/export", authMiddleware, export)
+		v1.GET("/save", authMiddleware, save)
+		v1.GET("/getImage", authMiddleware, getImage)
 	}
 	return router
 }

backend/services.go

@@ -200,10 +200,6 @@ func crop(c *gin.Context) {
 	}
 }
 
-//	func imageCenter(img gocv.Mat) image.Point {
-//		height, width := img.Size()[0], img.Size()[1]
-//		return image.Pt(width/2, height/2)
-//	}
 func rotate(c *gin.Context) {
 	email, exists := c.Get("email")
 	if !exists {
@@ -257,3 +253,42 @@ func getImage(c *gin.Context) {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Upload a image first"})
 	}
 }
+func export(c *gin.Context) {
+	email, exists := c.Get("email")
+	if !exists {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve email from context"})
+		return
+	}
+	_, exist := userStacks[email.(string)]
+	if exist {
+		imageFile := userStacks[email.(string)].CurrentImage.Path
+		c.File(imageFile)
+	} else {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Upload a image first"})
+	}
+}
+
+func save(c *gin.Context) {
+	email, exists := c.Get("email")
+	if !exists {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to retrieve email from context"})
+		return
+	}
+	_, exist := userStacks[email.(string)]
+	if exist {
+		imageFile := userStacks[email.(string)].CurrentImage.Path
+		data := bson.M{
+			"ImagePath": imageFile,
+			"User":      email.(string),
+		}
+		insertRes, err := client1.Database("users").Collection("image_details").InsertOne(context.Background(), data)
+		if err != nil {
+			log.Fatal(err)
+		}
+		fmt.Printf("Inserted document with ID %v\n", insertRes.InsertedID)
+		c.JSON(http.StatusOK, gin.H{"success": insertRes.InsertedID})
+
+	} else {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Upload a image first"})
+	}
+}

frontend/src/App.css

@@ -114,17 +114,16 @@ body{
     width: 100%;
 }
 .buttons > button{
-    width: 30%; 
-    height: 50px; 
+    width: 45%; 
+    height: 60px; 
     box-sizing: border-box; 
     border-radius: 10px;
     cursor: pointer;
 }
 .exp{
     position: absolute;
-    bottom:0;
+    bottom:0px;
     width: 100%;
-    height: 10%;
 }
 .exp > button{
     width: 50%; 
@@ -133,12 +132,13 @@ body{
     cursor: pointer;
 }
 .history{
-    height: 60%;
+    height: 55%;
     width: 100%;
     position: absolute;
-    bottom: 0px;
+    bottom: 5%;
     right: 0;
     background-color: rgb(9, 9, 9);
+    overflow-y: auto;
 }
 
 .upload{

frontend/src/components/History.js

@@ -23,23 +23,28 @@ export default function Main(props) {
       </div>
       <div className="sidebar">
         <h1 style={{ textAlign: "center" }}>
-          Hello {localStorage.getItem("Auth").substring(0,10)}
+          Hello {localStorage.getItem("Auth").substring(0, 10)}
         </h1>
         <div className="buttons">
           <button>CROP</button>
           <button>RESIZE</button>
-          <button>FILTER</button>
           <button>ROTATE</button>
-          <button>COLOR</button>
+          <button>GRAYSCALE</button>
+          <button>BLUR</button>
+          <button>BRIGHTNESS</button>
+          <button>SHARPENING</button>
+          <button>contrast</button>
         </div>
-        <div className="history">
-          <h1 style={{ backgroundColor: "black", textAlign: "center" }}>
-            History
-          </h1>
-          <div className="exp">
-            <button>Export</button>
-            <button>Save</button>
-          </div>
+        <h1
+          style={{
+            textAlign: "center",
+          }}>
+          History
+        </h1>
+        <div className="history"></div>
+        <div className="exp">
+          <button>Export</button>
+          <button>Save</button>
         </div>
       </div>
     </>