Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can you add more predefined filter like Sepia, GrayScale Etc #17

Open
mrjosshi opened this issue Apr 24, 2018 · 9 comments
Open

Can you add more predefined filter like Sepia, GrayScale Etc #17

mrjosshi opened this issue Apr 24, 2018 · 9 comments

Comments

@mrjosshi
Copy link

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

@Sunshine168
Copy link
Collaborator

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

@mrjosshi
Copy link
Author

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

@Sunshine168
Copy link
Collaborator

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

@Rohithzr
Copy link

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

@Sunshine168
Copy link
Collaborator

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

@Rohithzr
Copy link

Rohithzr commented Jul 18, 2018

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

@Sunshine168
Copy link
Collaborator

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

@Rohithzr
Copy link

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

@Sunshine168
Copy link
Collaborator

@Rohithzr it did not supported in RN

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants