separated functions and enabled button upon file load

dk-raw · dk-raw · commit 95a20f221912 · 2021-07-12T11:45:28.000+03:00
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # Image Editor Online
 
-Powerfully edit and export images online. Powered by the CSS 2.1 filter property
+Powerfully edit and export images online. Powered by the CSS 2.1 filter property.
+
+_why don't you star it too?✨_
 
 ## Technologies Used
 
@@ -15,6 +17,7 @@ Powerfully edit and export images online. Powered by the CSS 2.1 filter property
 - Cloudflare Pages → Hosting
 - Git → Version Control
 - GitHub → Source Control
+- Visual Studio Code → Code Editor
 
 ## Clone Repository
 
@@ -41,6 +44,10 @@ In the terminal...
   or
 - Type `tsc -w` for continuous compilation.
 
+## How to Contribute
+
+If you'd like to help the development of this project, I will constantly be leaving comments on the code with what needs to be fixed.
+
 ## License
 
 - [MIT License](https://mit-license.org/)
diff --git a/dist/Download.js b/dist/Download.js
@@ -0,0 +1,13 @@
+"use strict";
+const Download = () => {
+    const img = document.getElementById('output');
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0);
+    ctx.filter = "brightness(200)";
+    const dataURL = canvas.toDataURL('image/png');
+    const link = document.createElement('a');
+    link.download = 'output.png';
+    link.href = dataURL;
+    link.click();
+};
diff --git a/dist/Edit.js b/dist/Edit.js
@@ -0,0 +1,11 @@
+"use strict";
+const Edit = () => {
+    const img = document.getElementById('output');
+    const sepia = parseFloat(document.querySelector('#sepia').value);
+    const bright = parseFloat(document.querySelector('#brightness').value);
+    const contrast = parseFloat(document.querySelector('#contrast').value);
+    const grayscale = parseFloat(document.querySelector('#grayscale').value);
+    const saturation = parseFloat(document.querySelector('#saturation').value);
+    const hue = parseFloat(document.querySelector('#hue').value);
+    img.style.filter = `sepia(${sepia}%) brightness(${bright}%) contrast(${contrast}%) grayscale(${grayscale}%) saturate(${saturation}%) hue-rotate(${hue}deg)`;
+};
diff --git a/dist/Reset.js b/dist/Reset.js
@@ -0,0 +1,5 @@
+"use strict";
+document.querySelector('#reset-btn').addEventListener('click', () => {
+    document.querySelector('#adjustments').reset();
+    Edit();
+});
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/loadFile.js b/dist/loadFile.js
@@ -0,0 +1,7 @@
+"use strict";
+const loadFile = (event) => {
+    const image = document.querySelector('#output');
+    image.src = URL.createObjectURL(event.target.files[0]);
+    document.querySelector('#export-image-btn').disabled = false;
+    Edit();
+};
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
 <body>
     <div class="container-sm mt-4">
         <h1><i class="bi bi-card-image"></i> Online Image Editor</h1>
-        <p>Edit images online with a variety of filters. Powered by the filter property present in CSS 3</p>
+        <p>Edit images online with a variety of filters. Powered by the filter property present in CSS 2.1</p>
         <form class="my-4">
             <label for="formFile" class="form-label">Select an image or GIF to begin</label>
             <input class="form-control" accept="image/*" type="file" id="file" onchange="loadFile(event)">
@@ -50,9 +50,10 @@ <h1><i class="bi bi-card-image"></i> Online Image Editor</h1>
                     <input type="range" class="form-range" id="sepia" default="0" value="0" oninput="Edit()" min="0">
 
                     <div class="text-center my-4">
-                        <button class="btn btn-outline-primary m-1" type="button" onclick="Download()"
-                            data-bs-toggle="tooltip" data-bs-placement="top" title="Download the edited image"><i
-                                class="bi bi-cloud-arrow-down"></i> Export Image</button>
+                        <button class="btn btn-outline-primary m-1" type="button" id="export-image-btn"
+                            onclick="Download()" disabled data-bs-toggle="tooltip" data-bs-placement="top"
+                            title="Download the edited image"><i class="bi bi-cloud-arrow-down"></i> Export
+                            Image</button>
                         <button class="btn btn-outline-danger m-1" type="button" id="reset-btn" data-bs-toggle="tooltip"
                             data-bs-placement="top" title="Reset the adjustments"><i class="bi bi-arrow-clockwise"></i>
                             Reset Sliders</button>
@@ -69,7 +70,10 @@ <h1><i class="bi bi-card-image"></i> Online Image Editor</h1>
                 rel="noopener">Source Code</a>, <a href="mailto:damian@dkatsios.tk">Contact</a>
         </div>
     </div>
-    <script src="dist/index.js"></script>
+    <script src="dist/loadFile.js"></script>
+    <script src="dist/Edit.js"></script>
+    <script src="dist/Reset.js"></script>
+    <script src="dist/Download.js"></script>
     <script>
         var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
diff --git a/src/Download.ts b/src/Download.ts
@@ -0,0 +1,14 @@
+const Download = () => {
+    const img: any = <HTMLImageElement>document.getElementById('output')!;
+    const canvas: any = document.createElement('canvas');
+    const ctx: any = canvas.getContext('2d');
+    //crops and zooms the image a lot
+    ctx.drawImage(img, 0, 0);
+    //must apply the filters here
+    ctx.filter = "brightness(200)";
+    const dataURL: any = canvas.toDataURL('image/png');
+    const link: any = document.createElement('a');
+    link.download = 'output.png';
+    link.href = dataURL;
+    link.click();
+}
diff --git a/src/Edit.ts b/src/Edit.ts
@@ -0,0 +1,10 @@
+const Edit = () => {
+    const img: any = <HTMLImageElement>document.getElementById('output')!;
+    const sepia: number = parseFloat((<HTMLInputElement>document.querySelector('#sepia')).value)!;
+    const bright: number = parseFloat((<HTMLInputElement>document.querySelector('#brightness')).value)!;
+    const contrast: number = parseFloat((<HTMLInputElement>document.querySelector('#contrast')).value)!;
+    const grayscale: number = parseFloat((<HTMLInputElement>document.querySelector('#grayscale')).value)!;
+    const saturation: number = parseFloat((<HTMLInputElement>document.querySelector('#saturation')).value)!;
+    const hue: number = parseFloat((<HTMLInputElement>document.querySelector('#hue')).value)!;
+    img.style.filter = `sepia(${sepia}%) brightness(${bright}%) contrast(${contrast}%) grayscale(${grayscale}%) saturate(${saturation}%) hue-rotate(${hue}deg)`
+}
diff --git a/src/Reset.ts b/src/Reset.ts
@@ -0,0 +1,4 @@
+(<HTMLButtonElement>document.querySelector('#reset-btn')).addEventListener('click', () => {
+    (<HTMLFormElement>document.querySelector('#adjustments')).reset();
+    Edit();
+});
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/loadFile.ts b/src/loadFile.ts
@@ -0,0 +1,8 @@
+const loadFile = (event: any) => {
+    //load the image
+    const image: any = <HTMLImageElement>document.querySelector('#output')!;
+    //display the image
+    image.src = URL.createObjectURL(event.target.files[0]);
+    (<HTMLButtonElement> document.querySelector('#export-image-btn'))!.disabled = false;
+    Edit();
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +(<HTMLButtonElement>document.querySelector('#reset-btn')).addEventListener('click', () => {
 +    (<HTMLFormElement>document.querySelector('#adjustments')).reset();
 +    Edit();
 +});