add tiny2x2img() + center image

fairhive-labs · Jun 19, 2023 · 2419cd8 · 2419cd8
1 parent b811d9a
commit 2419cd8
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/api/templates/pixelart_template.html b/api/templates/pixelart_template.html
@@ -23,15 +23,15 @@
 
 <body>
     <div class="container">
-        <div class="card text-white bg-dark mb-3">
+        <div class="card text-white bg-dark mb-3 text-center">
             <div class="card-header">
                 <div class="d-grid gap-2">
-                    <button class="btn btn-secondary" onClick="rotateImg()">Rotate Image (clockwise)</button>
+                    <button class="btn btn-secondary" onclick="rotateImg()">Rotate Image (clockwise)</button>
                 </div>
             </div>
             <div class="card-body">
-                <img id="img" class="img-fluid" src="data:image/png;base64,{{.data}}"
-                    alt="fairhive - pixel art image" />
+                <img id="img" class="img-fluid" src="data:image/png;base64,{{.data}}" alt="fairhive - pixel art image"
+                    onclick="tiny2x2img()" />
             </div>
             <div class="card-footer">
                 <div class="d-grid gap-2">
@@ -68,6 +68,16 @@
                 ], timing);
             }
         }
+
+        function tiny2x2img() {
+            let img = document.querySelector("#img");
+            var canvas = document.createElement('canvas');
+            ctx = canvas.getContext('2d');
+            canvas.width = 4;
+            canvas.height = 4;
+            ctx.drawImage(img, 0, 0, 4, 4);
+            console.log(canvas.toDataURL());
+        }
     </script>
 </body>