diff options
| -rw-r--r-- | index.html | 56 | ||||
| -rw-r--r-- | main.js | 56 |
2 files changed, 84 insertions, 28 deletions
@@ -60,17 +60,17 @@ <div class="control"> <input type="range" id="brightness" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + class="brightness slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <div class="field"> <label class="label">Saturation</label> <div class="control"> <input type="range" - id="saturation" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + id="saturate" + class="saturate slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <div class="field"> @@ -78,8 +78,8 @@ <div class="control"> <input type="range" id="contrast" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + class="contrast slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> @@ -89,6 +89,15 @@ <p class="menu-label"> Blur and Sharpen </p> + <div class="field"> + <label class="label">Blur</label> + <div class="control"> + <input type="range" + id="blur" + class="blur slider is-fullwidth is-primary" + min="0" max="20" value="0" step="1"> + </div> + </div> </aside> </div> </div> @@ -103,43 +112,52 @@ </button> <p class="menu-label"> - Color Correction + Color Correction </p> <div class="field"> <label class="label">Brightness</label> <div class="control"> <input type="range" - id="slider0" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + id="brightness" + class="brightness slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <div class="field"> <label class="label">Saturation</label> <div class="control"> <input type="range" - id="slider0" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + id="saturate" + class="saturate slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <div class="field"> <label class="label">Contrast</label> <div class="control"> <input type="range" - id="slider0" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + id="contrast" + class="contrast slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <p class="menu-label"> - Distortion + Distortion </p> <p class="menu-label"> - Blur and Sharpen + Blur and Sharpen </p> + <div class="field"> + <label class="label">Blur</label> + <div class="control"> + <input type="range" + id="blur" + class="blur slider is-fullwidth is-primary" + min="0" max="20" value="0" step="1"> + </div> + </div> </div> </body> </html> @@ -1,17 +1,37 @@ -let canvas, imports; +let canvas; +let ctx; +let imports; +let settings = { + brightness: {}, + saturate: {}, + contrast: {}, + blur: {prefix: 'px'} +}; +const img = new Image(); // wait for site to be parsed so element can be found -document.addEventListener("DOMContentLoaded", function () { +document.addEventListener("DOMContentLoaded", function() { + canvas = document.getElementById("myCanvas"); + ctx = canvas.getContext("2d"); + imports = document.getElementById("imports"); + // bind listeners document.getElementById("take-picture").addEventListener("click", take_picture); document.getElementById("upload-image").addEventListener("change", upload_image) - + document.getElementById("save").addEventListener("click", save_image) document.getElementById("share").addEventListener("click", share_image) - canvas = document.getElementById("myCanvas"); - imports = document.getElementById("imports"); + for (let setting in settings) { + // make an array out of an iterable + const elements = [...document.getElementsByClassName(setting)]; + settings[setting].elements = elements; + for (let element of elements) { + element.addEventListener("input", settings_apply); + } + } + }) function take_picture() { @@ -20,18 +40,16 @@ function take_picture() { } -function upload_image(event) { +function upload_image() { canvas.classList.remove("is-hidden"); imports.classList.add("is-hidden"); console.log(this.files[0]); - const img = new Image(); - const ctx = canvas.getContext("2d"); img.src = URL.createObjectURL(this.files[0]); img.onload = function() { canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; - ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); } } @@ -47,3 +65,23 @@ function save_image() { function share_image() { } + +function settings_apply(event) { + const changed_setting = event.target.id; + const new_value = event.target.value; + + // update all inputs for that setting (mobile and desktop) to the new value + for (let element of settings[changed_setting].elements) { + if (element == event.target) continue; + element.value = new_value; + } + + const filter = Object.entries(settings) + .map(([setting, {elements, prefix}]) => `${setting}(${elements[0].value}${prefix || ""})`) + .join(" ") + + ctx.filter = filter + console.log(filter); + + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); +} |