Merge pull request #4 from Hermit-Tools/make-editing-non-destructive

Made editing non destructive
Hermit-Tools · Jun 4, 2020 · c067330 · c067330
2 parents fc701ff + b6860a4
commit c067330
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 53 deletions.
diff --git a/cubfan135/index.html b/cubfan135/index.html
@@ -9,9 +9,9 @@
     <canvas width="1920" height="1280" id="canvas">
         Your browser does not support the &#60canvas&#62 element. Consider upgrading to a newer browser.
     </canvas><br>
-    <label for="bgInput"><span title="Choose background image or nothing.">1. Choose Background Image: </span></label><input type="file" accept="image/*" onchange="editOnCanvas(event)" id="bgInput"><br>
-    <label for="epNumSelector"><span title="Enter episode number here. It can accept number, text or nothing.">2. Insert Episode Number: </span></label><input type="text" onchange="episodeNum()" id="epNumSelector"><br>
-    <label for="hcLogoToggler"><span title="Yes&#9745;/No&#72224;.">3. Show HermitCraft Logo: </span></label><input type="checkbox" onchange="hcLogo()" id="hcLogoToggler"><br>
+    <label for="bgInput"><span title="Choose background image or nothing.">1. Choose Background Image: </span></label><input type="file" accept="image/*" onchange="process()" id="bgInput"><br>
+    <label for="epNumSelector"><span title="Enter episode number here. It can accept number, text or nothing.">2. Insert Episode Number: </span></label><input type="text" onchange="process()" id="epNumSelector"><br>
+    <label for="hcLogoToggler"><span title="Yes&#9745;/No&#72224;.">3. Show HermitCraft Logo: </span></label><input type="checkbox" onchange="process()" id="hcLogoToggler"><br>
     <button title="Finish editing image and export it." id="getImage">Finish</button><br>
 
     <img src="" alt="output" id="output">

diff --git a/cubfan135/script.js b/cubfan135/script.js
@@ -1,50 +1,56 @@
-const bgInput = document.getElementById('bgInput');
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-const output = document.getElementById('output');
-const getImage = document.getElementById('getImage');
-const epNumSelector = document.getElementById('epNumSelector');
-const hcLogoToggler = document.getElementById('hcLogoToggler');
-
-getImage.addEventListener('click', finishEditing.bind())
-
-function editOnCanvas(event) {
-    let bgImage = new Image();
-    bgImage.addEventListener('load', () => {
-        ctx.drawImage(bgImage, 0, 0, 1920, 1280);
-    }, false);
-
-    bgImage.src = URL.createObjectURL(event.target.files[0]);
-}
-
-function episodeNum() {
-    let epNum = epNumSelector.value;
-
-    ctx.fillStyle = '#fff';
-    ctx.strokeStyle = '#000';
-    ctx.lineWidth = 7;
-    ctx.font = 'bold 300px Tahoma';
-    ctx.textBaseline = 'bottom';
-
-    ctx.fillText(epNum, 20, 1270);
-    ctx.strokeText(epNum, 20, 1270);
-    ctx.fill();
-    ctx.stroke();
-}
-
-function hcLogo() {
-    if (hcLogoToggler.checked) {
-        let hc7Logo = new Image()
-        hc7Logo.addEventListener('load', () => {
-            ctx.drawImage(hc7Logo, 40, 10, 1800, 230)
-        })
-        //hc7Logo.src = ("https://raw.githubusercontent.com/mmaismma/mmaismma.github.io/master/Hermits'%20Thumbnail%20Maker/cubfan135/hc7logobydnator.png")
-        hc7Logo.src = ("https://hermit-tools.github.io/Thumbnail%20Maker/hc7logobydnator.png")
-        hc7Logo.crossOrigin = 'Anonymous';
-    }
-}
-
-function finishEditing() {
-    let image = canvas.toDataURL();
-    output.src = image;
-}
+const bgInput = document.getElementById('bgInput');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const output = document.getElementById('output');
+const getImage = document.getElementById('getImage');
+const epNumSelector = document.getElementById('epNumSelector');
+const hcLogoToggler = document.getElementById('hcLogoToggler');
+
+getImage.addEventListener('click', finishEditing.bind())
+
+function editOnCanvas() {
+    let bgImage = new Image();
+    bgImage.addEventListener('load', () => {
+        ctx.drawImage(bgImage, 0, 0, 1920, 1280);
+        hcLogo();
+        episodeNum();
+    }, false);
+
+    bgImage.src = URL.createObjectURL(bgInput.files[0]);
+}
+
+function episodeNum() {
+    let epNum = epNumSelector.value;
+
+    ctx.fillStyle = '#fff';
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 7;
+    ctx.font = 'bold 300px Tahoma';
+    ctx.textBaseline = 'bottom';
+
+    ctx.fillText(epNum, 20, 1270);
+    ctx.strokeText(epNum, 20, 1270);
+    ctx.fill();
+    ctx.stroke();
+}
+
+function hcLogo() {
+    if (hcLogoToggler.checked) {
+        let hc7Logo = new Image()
+        hc7Logo.addEventListener('load', () => {
+            ctx.drawImage(hc7Logo, 40, 10, 1800, 230)
+        })
+        hc7Logo.src = ("https://hermit-tools.github.io/Thumbnail-Maker/hc7logobydnator.png");
+        hc7Logo.crossOrigin = 'Anonymous';
+    }
+}
+
+function finishEditing() {
+    let image = canvas.toDataURL();
+    output.src = image;
+}
+
+function process() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    editOnCanvas();
+}