From 4932c78ddf7ee5f2fd70468e0dbe9fa00eb2302b Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Fri, 2 Jul 2021 12:56:43 -0400
Subject: [PATCH] Create canvas image uploader

---
 Chapter 13/canvas image uploader | 43 ++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 Chapter 13/canvas image uploader
diff --git a/Chapter 13/canvas image uploader b/Chapter 13/canvas image uploader
new file mode 100644
index 0000000..0d1c08c
--- /dev/null
+++ b/Chapter 13/canvas image uploader	
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+    <style>
+        #canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <div><label>Image</label>
+        <input type="file" id="imgLoader" name="imgLoader">
+    </div>
+    <div><canvas id="canvas"></canvas></div>
+    <script>
+        const canvas = document.querySelector('#canvas');
+        const ctx = canvas.getContext('2d');
+        const imgLoader = document.querySelector('#imgLoader');
+        imgLoader.addEventListener('change', handleUpload);
+
+        function handleUpload(e) {
+            console.log(e);
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                console.log(e);
+                const img = new Image();
+                img.onload = function () {
+                    canvas.width = img.width / 2;
+                    canvas.height = img.height / 2;
+                    ctx.drawImage(img, 0, 0, img.width / 2, img.height / 2);
+                }
+                img.src = e.target.result;
+            }
+            reader.readAsDataURL(e.target.files[0]);
+        }
+
+    </script>
+</body>
+
+</html>
