react-imgpro icon indicating copy to clipboard operation
react-imgpro copied to clipboard

Can you add more predefined filter like Sepia, GrayScale Etc

Open mrjosshi opened this issue 7 years ago • 9 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

mrjosshi avatar Apr 24 '18 09:04 mrjosshi

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

Sunshine168 avatar Apr 25 '18 01:04 Sunshine168

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

mrjosshi avatar Apr 25 '18 11:04 mrjosshi

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

Sunshine168 avatar May 05 '18 14:05 Sunshine168

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

Rohithzr avatar Jul 18 '18 08:07 Rohithzr

@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 avatar Jul 18 '18 11:07 Sunshine168

@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 avatar Jul 18 '18 11:07 Rohithzr

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

Sunshine168 avatar Jul 18 '18 11:07 Sunshine168

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

Rohithzr avatar Jul 18 '18 11:07 Rohithzr

@Rohithzr it did not supported in RN

Sunshine168 avatar Jul 18 '18 12:07 Sunshine168