Add files via upload

Kuvrot · Jul 15, 2023 · a505fa3 · a505fa3
1 parent d3ccf13
commit a505fa3
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -68,7 +68,7 @@
                                 <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">File</a>
                                 <div class="dropdown-menu" aria-labelledby="navbarDropdown" >
                                     <a class="dropdown-item" onclick="newFile()" href="#!">New file</a>
-                                    <a class="dropdown-item" href="#!">Save file</a>
+                                    <a class="dropdown-item" href="#!" onclick="saveProject()">Save file</a>
                                     <a class="dropdown-item" href="#!">Open file</a>
                                     <div class="dropdown-divider"></div>
                                     <a class="dropdown-item" href="#!">Import image</a>

diff --git a/js/scripts.js b/js/scripts.js
@@ -183,8 +183,7 @@ document.addEventListener('keydown', function(event) {
                 undo();
 
             }
-
-
+
         }
 
     }
@@ -194,43 +193,75 @@ document.addEventListener('keydown', function(event) {
 
 
 
-  function undo () {
+function undo () {
 
-
-    console.log(currentIndex);
-
-    if (!canUndo){
+console.log(currentIndex);
 
-        if (currentIndex > 0) {
+if (!canUndo){
 
-            History.pop();
-            currentIndex--;
-            console.log(currentIndex);
-
-
+    if (currentIndex > 0) {
 
-            ctx.putImageData(History[currentIndex] , 0 , 0);
+        History.pop();
+        currentIndex--;
+        console.log(currentIndex);
+        ctx.putImageData(History[currentIndex] , 0 , 0);
 
-        }else{
-            History = [];
-            currentIndex = -1;
-            ctx.clearRect(0 , 0 , canvas.width , canvas.height);
-        }
+    }else{
+        History = [];
+        currentIndex = -1;
+        ctx.clearRect(0 , 0 , canvas.width , canvas.height);
+    }
 
-            Z = false;
-            setTimeout(() => {
-                canUndo = true;
-            }, 10);
+        Z = false;
+        setTimeout(() => {
+            canUndo = true;
+        }, 10);
 
-   }
+}
 
-  }
+}
+
+
+function saveProject () {
+
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
+    // Convert the image data to a serializable format
+    const serializedData = serializeImageData(imageData);
+
+    // Convert the serialized data to a JSON string
+    const json = JSON.stringify(serializedData);
+
+    // Create a Blob from the JSON string
+    const blob = new Blob([json], { type: 'application/json' });
+
+    // Create a URL from the Blob
+    const url = URL.createObjectURL(blob);
+
+    // Create a download link
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'image_data.json';
+
+    // Trigger a click event on the link to initiate the download
+    link.click();
+
+    // Revoke the URL object to release resources
+    URL.revokeObjectURL(url);
+  }
+
+  function serializeImageData(imageData) {
+    return {
+      width: imageData.width,
+      height: imageData.height,
+      data: Array.from(imageData.data),
+    };
+  }
 
 function saveImage() {
 
     // Guardar la imagen del canvas temporal
-    var link = document.createElement('a');
+    let link = document.createElement('a');
     link.href = canvas.toDataURL();
     link.download = 'canvas_image.png';
     link.click();