update image cropping code

rhaeguard · Apr 20, 2024 · 5077afb · 5077afb
1 parent 167aa33
commit 5077afb
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 14 deletions.
diff --git a/image_crop/const.js b/image_crop/const.js
diff --git a/image_crop/index.html b/image_crop/index.html
@@ -1,19 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Image Cropping</title>
+
+    <style>
+        #main-container {
+            display: flex;
+            flex-direction: row;
+        }
+
+        #collage {
+            flex: 50%;
+            display: flex;
+            overflow-x: hidden;
+            overflow-y: scroll;
+        }
+
+        .column {
+            flex: 50%;
+            padding: 0 4px;
+        }
+
+        .column img {
+            margin-top: 8px;
+            vertical-align: middle;
+        }
+    </style>
 </head>
-<body>
-
-    <canvas id="board"></canvas>
 
-    <div>
-        <button id="crop">Crop</button>
+<body>
+    <div id="main-container">
+        <div>
+            <canvas id="board"></canvas>
+            <div>
+                <button id="crop">Crop</button>
+            </div>
+        </div>
+        <div id="collage">
+            <div class="column"></div>
+            <div class="column"></div>
+        </div>
     </div>
 
+    <script src="const.js"></script>
     <script src="main.js"></script>
 </body>
+
 </html>
diff --git a/image_crop/main.js b/image_crop/main.js
@@ -13,7 +13,7 @@ let end = null;
 
 let current = null;
 
-function getParams() {
+function getParams(end) {
     const [ax, ay] = start;
     const [bx, by] = end;
     const w = Math.abs(ax - bx)
@@ -36,11 +36,24 @@ function crop() {
 
         ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
         ctx.drawImage(this, x, y, w, h, 0, 0, w, h)
+
+        const imageTag = document.createElement("img");
+        imageTag.src = ctx.canvas.toDataURL();
+        imageTag.style.width = "100%";
+
+        const column = document.querySelectorAll("#collage img").length % 2 == 0 ? 1 : 2;
+        document.querySelector(`#collage > .column:nth-child(${column})`).prepend(imageTag)
+
+        canvas.width = this.naturalWidth;
+        canvas.height = this.naturalHeight;
+
+        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+        ctx.drawImage(this, 0, 0);
     };
+    image.setAttribute('crossorigin', 'anonymous');
     // Draw when image has loaded
     // Load an image of intrinsic size 300x227 in CSS pixels
-    image.src =
-        "https://www.denofgeek.com/wp-content/uploads/2022/06/Made-in-Abyss-Season-2.jpg?resize=768%2C432";
+    image.src = SOURCE_IMAGE;
 
 }
 
@@ -57,12 +70,12 @@ function redraw() {
 
         ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
         ctx.drawImage(this, 0, 0);
-        if (start != null) {
+        if (start != null) {            
             let copyEnd = end;
             if (end == null) {
                 copyEnd = start
-            } 
-            current = getParams();
+            }
+            current = getParams(copyEnd);
             const [w, h, top] = current;
             const [x, y] = top
             ctx.rect(x, y, w, h);
@@ -73,8 +86,7 @@ function redraw() {
     };
     // Draw when image has loaded
     // Load an image of intrinsic size 300x227 in CSS pixels
-    image.src =
-        "https://www.denofgeek.com/wp-content/uploads/2022/06/Made-in-Abyss-Season-2.jpg?resize=768%2C432";
+    image.src = SOURCE_IMAGE;
 }
 
 canvas.addEventListener("click", (e) => {