How to Use WebAssembly to Transform Images Without a Server

A practical and realistic WebAssembly use case

Ali Nasserzadeh
Jan 21 · 4 min read
Photo by Jatniel Tunon on Unsplash

If you are a regular tech blog reader, chances are that you have come into contact with WebAssembly (Wasm) and the hype that surrounds it.

Put simply, WebAssembly is a byte code that can be executed by web browsers, which means that applications written in any language could be compiled into WebAssembly and then executed in your browser.

The hype brings many quality articles and talks, demonstrating use cases and advantages, such as fully coding your GUI in C++.

Getting your app into Google Play is an easy task, but Apple’s App Store makes things a tad more difficult. Amongst many requirements, your app icon images must not have an alpha channel. Even if said alpha channel is unused.

Now, removing the alpha channel is not rocket science and a matter of minutes, using ImageMagick (written in C++) it can be achieved with a simple one-liner:

magick convert icon.png -background white -alpha off new-icon.png

So what if we wanted to create a website where we can supply our images and automatically remove all alpha channels? The typical architecture could look something like this:

The frontend has to call a backend service that then uses an ImageMagick executable located on the server.
The frontend has to call a backend service that then uses an ImageMagick executable located on the server.

One of the issues here is that our web app won’t really be useful to a user once they are offline. Also, ImageMagick has to be installed on the back-end server and the client needs to consume an endpoint and, therefore, upload all images to the server.

While this isn’t much of a problem and typical for web apps that handle image manipulation, using Wasm, we can do better!

Our goal is to create a progressive web app that is useful without an active internet connection (after loading the website at least once of course). This won’t be possible if our image manipulation happens on a server, so let’s take a look at our simplified architecture:

Yep, that’s it. We will have all our logic in the front end (one could be tempted to use the term serverless, sadly that word is reserved for something completely different), no images are ever uploaded to any server.

But we won’t be using any JavaScript image-manipulation library, instead we want to use ImageMagick, which we already know and love. But there is one problem, it’s an executable, how do we get it into our codebase in a way that we can execute it from our JS?

Luckily, someone has already done most of the work for us and recompiled the ImageMagick code base into WebAssembly, ready to be used in browsers. By simply using a high-level Javascript API we can now use the full power (well almost) of ImageMagick in our front end.

Let’s start by importing the ES module using a script tag for simplicity reasons. The package is also available on npm.

We can now use the window.magick object in our app to execute ImageMagick commands on our images.

All that’s left for us to do is to build our UI and use the WASM-ImageMagick API to convert our images using essentially the same call we did in the command line, the code might look something like this:

We simply pass the filename, content, and the desired ImageMagick command to the imported window.magick object and receive an image without an alpha channel.

The ReadFile method makes use of helper functions supplied by the WASM-ImageMagick library to get the filename and content in a suitable structure. We now have the power of ImageMagick in our browser and the possibilities are endless.

For a full working example, including sending the manipulated images back to the user as a “download”, check out Remove Alpha Channel.

You can access the full source code in the dev tools of your choice, after all, there is no server-side code involved!

I hope these simple use case give you a better feeling of the power and everyday use cases WebAssembly can cover. Thanks for reading.

Better Programming

Advice for programmers.

Ali Nasserzadeh

Written by

Senior Software Engineer in the finance industry. Teacher and Typescript enthusiast.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade