J.S | CSS Still working on this image editor - help -

Question

Now I have multiple filters, somehow different functions (inputs) are controlling other filters.
Like... a is supposed to control a, but it's controlling b too.

I'm not sure if the filters have to be in certain or what, but they're out of place.
You'l see what i mean when you open the code.
Can someone help me tell each different function (input) to control they're own filters.?

https://code.sololearn.com/Wep8Iw2ZgCiF/?ref=app

Answer 1

what i can see is you putting too much value in the filter
range normally use percent from 0% to 100% or using if not using percent ranging from 0 to 1, where 0 is 0% and 1 is 100%.

inyour case, for example the saturation is up to 200. that means if 1 is 100% and 100% is normal state of the image, putting 200 will result in 20000% saturation.

also you need to put a correct initial value for the filter, this is what cause the image turn grayscale in the first time you turn the slider. because initial value of the saturation is 0. try to change it to 1 or 100% as default value.

Answer 2

Taste I don't understand why the brightness is controlling grayscale and brightness both,
And also why grayscale isn't working.
--

Answer 3

Taste , they all have 100% max .
But, they're controlling different filters.

Like...grayscale is controling saturate until it gets to 100%.
Same thing for brightness - its controlling something different.

--

Answer 4

Taste Should it be
A, "saturate("+str.value+"%)"
or
B, "saturate("+str.value+"%"+")"

A or B?

Answer 5

Taste
🤔🤔🙄
I don't know if it's because of the percentages or what, now it turned out into this:
https://code.sololearn.com/Wep8Iw2ZgCiF/?ref=app
--

Answer 6

its just looks like its controlling the other.
the initial value of saturation (in your slider) is 100, that means when the event is fired it'll take that value. and as i said before 100 without % means 10000%.

try to add a percent in the filter string in js. forexample
"saturate("+str.value+"%)"
also apply this in the other filter function

Answer 7

Taste u right 💡.

Anything working?; Brightness ✔️;

Any problems?:
- Saturate + Grayscale make the image darker when i first press on the input.
- grayscale does work. the problem is it makes the picture darker when i first press on it.

I think its the saturate that isn't working.
1, it makes the image darker.
2, it seems to be controling grayscale (when i move to the left.)

Answer 8

Taste ,
image darkening on black: fixed✔️

btw - i put the value of brightness to 200.
So 100 is 50%. So we have the option to make it brighter or darker. because if it's set to 100, we only have z option to make it darker. -- and it doesn't seem to be causing any trouble.

Anyways __
Now is saturate supposed to turn the image to black and white (grayscale) when its moved to left? Because that's what it's doing.
If that isn't normal, that's what im trying to fix.
//Stop it from controlong grayscale.
--

Answer 9

Taste ,
nvr mind.
Ya. Saturate is supposed to make it kinda grayscale when moved to the left (0).

Anything working?:ALL ✅;
Anything need to fix: not for now;
✔️✔️✔️

Thank You Taste.
Everything is working now.😄

Answer 10

sorry, i forgot to reply. good to know all the problem are solved :)

Answer 11

nope, its all working fine.
other than the "too much value" problem i mentioned above

Answer 12

its basicly the same
"%" + ")" = "%)"

Answer 13

if the value of brightness is 100.
then in your code brightness is divided by 25.
then whats the actual value for brightness ?

Answer 14

the image is darker because the initial valie of brightness is at 50%
put it at 100%