diff options
| -rw-r--r-- | index.html | 126 | ||||
| -rw-r--r-- | main.js | 12 |
2 files changed, 131 insertions, 7 deletions
@@ -95,7 +95,7 @@ <input type="range" id="brightness" class="brightness slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.05"> + min="0" max="2" value="1" step="0.01"> </div> </div> <div class="field"> @@ -128,10 +128,70 @@ min="0" max="2" value="1" step="0.01"> </div> </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-palette fa-fw"></i> + Color + <span class="icon is-pulled-right hue-rotate-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="hue-rotate" + class="hue-rotate slider is-fullwidth is-primary" + min="-180" max="180" value="0" step="1"> + </div> + </div> <p class="menu-label"> - Distortion + Filters </p> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-radio fa-fw"></i> + Grayscale + <span class="icon is-pulled-right grayscale-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="grayscale" + class="grayscale slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-hat-cowboy-side fa-fw"></i> + Sepia + <span class="icon is-pulled-right sepia-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="sepia" + class="sepia slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-circle-half-stroke fa-fw"></i> + Invert + <span class="icon is-pulled-right invert-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="invert" + class="invert slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> <p class="menu-label"> Blur and Sharpen </p> @@ -219,10 +279,70 @@ min="0" max="2" value="1" step="0.01"> </div> </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-palette fa-fw"></i> + Color + <span class="icon is-pulled-right hue-rotate-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="hue-rotate" + class="hue-rotate slider is-fullwidth is-primary" + min="-180" max="180" value="0" step="1"> + </div> + </div> <p class="menu-label"> - Distortion + Filters </p> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-radio fa-fw"></i> + Grayscale + <span class="icon is-pulled-right grayscale-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="grayscale" + class="grayscale slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-hat-cowboy-side fa-fw"></i> + Sepia + <span class="icon is-pulled-right sepia-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="sepia" + class="sepia slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-circle-half-stroke fa-fw"></i> + Invert + <span class="icon is-pulled-right invert-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="invert" + class="invert slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> <p class="menu-label"> Blur and Sharpen </p> @@ -2,10 +2,14 @@ let canvas; let video; let ctx; let settings = { - brightness: {}, - saturate: {}, - contrast: {}, - blur: { filter: value => value * canvas.width / 100 + 'px' } + "brightness": {}, + "saturate": {}, + "contrast": {}, + "hue-rotate": {filter: value => value + "deg"}, + "grayscale": {}, + "sepia": {}, + "invert": {}, + "blur": { filter: value => value * canvas.width / 100 + 'px' } }; const img = new Image(); |