T-Shirt Forums banner
1 - 2 of 2 Posts

1,580 Posts
Discussion Starter · #1 ·
Just thought I'd pass on this little tip to anyone coding their own image-handling routines with ImageMagick.

ImageMagick (IM) can be installed locally or on a server. For the purpose of writing web apps that use IM it's usually accessed by making Ajax calls to a PHP routine which uses IM to alter the image which is then returned to the browser and displayed via JavaScript (JS).

All well and good, but a much better way would be to be able to handle the image manipulations within the browser itself. In other words, have IM running in the browser and eliminate any calls to a server.

Enter WASM-ImageMagick! Someone has kindly compiled IM to run natively in the browser using Web Assembly (WASM) - GitHub - KnicKnic/WASM-ImageMagick: Webassembly compilation of https://github.com/ImageMagick/ImageMagick & samples

I've been experimenting with this over the last day or two and it's very good. It simply involves putting your usual IM command into a JS array, like so ...

const command = ["convert", "srcFile.png", "-bordercolor", "none", "-border", "45", "-background", "#ffffff", "-alpha", "background", "-channel", "A", "-blur", "0x7", "-level", "0,1%", "out.png"];
The above command is one I have put together myself to produce a contoured outline around transparent PNG images (eg. for use as sticker product images, for which I have also added a small, centred drop shadow to make them stand out more using fabric.js). Top image: Original, Bottom image: Processed sticker ...

Font Logo Brand Graphics Symbol

This is just a small example. Using WASM-ImageMagick you now have the power of IM running natively in the user's browser, with no calls to the server required and no Node.js required. Pure Vanilla JS. (y) 😉

Hope this helps anyone struggling with producing product images using IM and would like to keep everything serverless and running in JS.
1 - 2 of 2 Posts