3 ms·

Browser-Based Image Editor with Custom Filters and Blend Modes

2 points by atum47 2y ago

atum47 2y ago
Hi everyone, I built customFilter, a browser-based image editor, to explore how various filter kernels convolve with images to produce different results. One key feature is the stack system, where you can load and access multiple images via variables (i1, i2, i3… iN). From there, you can apply custom blend operations like: i1 < 0.5 ? i2 : i3 meaning if a pixel in image1 is below 0.5 (pixel value is normalized), it uses the pixel from image2, otherwise image3. It’s fully open-source, and I’d love to hear your thoughts.
andrei-akopian 2y ago
Thank you so much for making this. I am still figuring out how exactly the filter works. The guide you linked is great, but I was confused how to replicate the steps in your editor. Fur purposes of playing around, it would be great if you linked some good images/examples. The ones in my download folder are kind of bad. Also: https://www.youtube.com/@Acerola_t https://www.youtube.com/@Acerola_t
- atum47 2y ago
  Yeah, I was thinking about writing a blog post about it but I did not know if people would be interested. For the filter try this 0 -1 0 -1 5 -1 0 -1 0 This will apply a sharp filter to a loaded image 0 1 0 1 -3 1 0 1 0 This one will bluer the image
- andrei-akopian 2y ago
  Standard test images: https://en.wikipedia.org/wiki/Standard_test_image https://en.wikipedia.org/wiki/Standard_test_image - https://en.wikipedia.org/wiki/Lenna https://en.wikipedia.org/wiki/Lenna - https://sipi.usc.edu/database/ https://sipi.usc.edu/database/ - https://r0k.us/graphics/kodak/ https://r0k.us/graphics/kodak/
  - atum47 2y ago
    Yeah, I can look into adding a example image or even the ability to load a online image via URL
atum47 2y ago
If anybody is interested here's an example of how to do edge detection using this editor https://github.com/victorqribeiro/customFilter/issues/1#issuecomment-2419788697 https://github.com/victorqribeiro/customFilter/issues/1#issu...

2 points by atum47 2y ago

Hi everyone, I built customFilter, a browser-based image editor, to explore how various filter kernels convolve with images to produce different results. One key feature is the stack system, where you can load and access multiple images via variables (i1, i2, i3… iN). From there, you can apply custom blend operations like: i1 < 0.5 ? i2 : i3 meaning if a pixel in image1 is below 0.5 (pixel value is normalized), it uses the pixel from image2, otherwise image3. It’s fully open-source, and I’d love to hear your thoughts.

andrei-akopian 2y ago

Thank you so much for making this. I am still figuring out how exactly the filter works. The guide you linked is great, but I was confused how to replicate the steps in your editor. Fur purposes of playing around, it would be great if you linked some good images/examples. The ones in my download folder are kind of bad. Also: https://www.youtube.com/@Acerola_t https://www.youtube.com/@Acerola_t

atum47 2y ago
Yeah, I was thinking about writing a blog post about it but I did not know if people would be interested. For the filter try this 0 -1 0 -1 5 -1 0 -1 0 This will apply a sharp filter to a loaded image 0 1 0 1 -3 1 0 1 0 This one will bluer the image
andrei-akopian 2y ago
Standard test images: https://en.wikipedia.org/wiki/Standard_test_image https://en.wikipedia.org/wiki/Standard_test_image - https://en.wikipedia.org/wiki/Lenna https://en.wikipedia.org/wiki/Lenna - https://sipi.usc.edu/database/ https://sipi.usc.edu/database/ - https://r0k.us/graphics/kodak/ https://r0k.us/graphics/kodak/
- atum47 2y ago
  Yeah, I can look into adding a example image or even the ability to load a online image via URL

atum47 2y ago

If anybody is interested here's an example of how to do edge detection using this editor https://github.com/victorqribeiro/customFilter/issues/1#issuecomment-2419788697 https://github.com/victorqribeiro/customFilter/issues/1#issu...