T-Shirt Forums banner
1 - 3 of 3 Posts

Registered
Joined
1,603 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 ...

JavaScript:
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.
 

Registered
Joined
4,026 Posts
Apparently, Redbubble have had difficulties in displaying their sticker product images and have come up with a long-winded work-around in fabric.js - Sticker Effect on Transparent PNGs with HTML5 Canvas
a) It's obviously not long-winded... just a few lines of code.
b) fabric.js is obviously not used for this part.
c) There is a reason it's done this way. If they have the full size version of the graphic on the client-side, people will just steal it.


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.
What makes ImageMagick "special" on the server-side is its ability to process huge images with very little RAM (ie $5 servers with 1GB RAM).
For client-side applications, canvas/WebGL are better and easier options.
 
1 - 3 of 3 Posts
Top