Image processing on the web: a short list of options
The purpose of this article is to give background on some technologies you can use to integrate an image manipulation tool into your application. I built an image filtering tool as an early coding project several years back. I built it from scratch. Let me be the first to say this is a bad option if you are looking to build something quickly. There are plenty of image manipulation libraries out there that can crop, apply filters, and generally save you a lot of time. If you are just looking for some way to integrate cropping, filtering, ect, into your app as fast as possible, check out the article below for some libraries you can use:
https://flatlogic.com/blog/12-javascript-image-manipulation-libraries-for-your-next-web-app/
If however, you are interested in building a tool from scratch, you’ll have to choose between three basic approaches:
- Utilizing the Canvas API to manipulate images. This is a good option if what you are doing is fairly lightweight, like cropping an image, applying a color overlay, or blending images together. The upside is that the canvas API is in javascript and can be used to do almost anything with an image. The downside is that for more advanced filters and effects that require mathematical calculations on individual pixels, in javascript tends be slow, and reading the pixel data in the first place is also slow. This can be a problem if you want your user to be able to adjust a complicated effect in real time.
- WebGL Shaders — this is the most performant option as it is able to take advantage of the users graphics card, and doesn’t involve looping over pixel data in the same way. It is faster than canvas and is often used for video games or generating complex effects. However, it does have a bit of a learning curve as you are working it involves working with vectors, textures, and shaders, rather than pixels and requires learning these concepts.
- Backend API calls — another popular option is to avoid javascript completely, and use an imaging processing library in python, C++, or another backend language. Of course, on the web this means a small delay as the request is sent and to the backend, processed, and returned. On the plus side, you are eating up a lot less of the browsers memory.
Of these three, I chose to build an my image filtering app using the canvas API. This tool is currently restricted to applying color and unsharp filters by using a brush or eraser tool and is definitely more of a proof of concept than a professional editing tool. Still, being able to add different colors of light and sharpen selective areas opens up some creative possibilities!
Check out my tool below:
Some articles about working with the canvas API:
