university/Imagine
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: more canvas css filters

Browse source
This commit is contained in:
Orangerot 2024-12-12 02:19:05 +01:00
parent fc98bdd183
commit f9b4d17140
2 changed files with 131 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
index.html
View file

@ -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>

12
main.js
View file

@ -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();