javascriptjquerycssimage-processing

High contrast image filter

I need a way to achive this effect enter image description here

The top photo is what is going to be the input. I have tried and it doesn't seem to be posible using any of the web-filters, the the solution will probobly we to use a canvas. The problem is just that i have to experiance in using a canvas. Also, would it be possible for the user to interact with the contrast using a slider?

The image will be inputted through a link that is simply called url.

Solution

  • Unless there's some constraint that I can't see, you shouldn't need to use canvas. You can do this by combining the grayscale and contrast filters in CSS like this:

    img {
  filter: grayscale(100%) contrast(10000%);
}

    Moving contrast above 100% allows you to achieve high contrast, whereas 100% is the natural contrast of the image. The number used here is just an arbitrarily large value. You can test and see what will work best for you.

    Here's a pen of your image to demonstrate:

    Updating values is possible with JavaScript, but is a little more advanced. You can see something similar in this pen, where the values for things like image blur can be modified with a slider:

    This was based on the third lesson in Wes Bos's free JavaScript 30 course:

    That'd be a good place to get started on how to manipulate values like these.