nitin42 / react-imgpro

📷 Image Processing Component for React

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can you add more predefined filter like Sepia, GrayScale Etc

mrjosshi opened this issue · comments

Here are some example of filter so we can use all below by passing props true and false
F1977
Amaro
Brannan
Earlybird
Hefe
Hudson
Inkwell
Lokofi
LordKelvin
Nashville
Normal
Rise
Sierra
Sutro
Toaster
Valencia
Walden
XproII

I will check it those day , and PR is also welcome

Thanks you can use all these filter https://css-tricks.com/almanac/properties/f/filter/ same we use for grayscale

Having an additional questions which the img with css filter can be translation into base64 to download the img as blob?

is there anyone working on this? or should I do some work and make a PR? :D

@Rohithzr Sorry for stagnant, I have been try for using css filter ~ which meaning we nor translation into base64 to download or just show . i want get some idea and PR is welcome, but share your idea before PR is aappreciate !

@Sunshine168 instead of using css filters, i would support manipulating the image's properties using jimp.

// Sepia Effect
outputRed = (inputRed * .393) + (inputGreen *.769) + (inputBlue * .189)
outputGreen = (inputRed * .349) + (inputGreen *.686) + (inputBlue * .168)
outputBlue = (inputRed * .272) + (inputGreen *.534) + (inputBlue * .131)

this loops through the image pixels and creates the sepia effect, hence does not lose quality but can be a bit intensive compared to css filters
It will use https://github.com/oliver-moran/jimp#colour-manipulation

another method is to take a screenshot of the new image, hence losing the quality, this method is used in instagram and snapchat to add text and emojis to the image.

for web, i support the first method and not the css method.

@Rohithzr Nice! just go for it, i will follow up the progress of your work.

@Sunshine168 one question, have you ever tested this library on React-Native ?

@Rohithzr it did not supported in RN