Search code examples
cssimage-processingserver-side

How can I apply CSS to a JPG server-side?


I have JPGs that I want to run a couple CSS operations on server-side, for instance, crop and round corners, then served these processed JPGs to clients. The clients can't interpret CSS, they can only render JPGs.

Is there a tool that can do this, maybe some sort of commandline web browser?

Edit: I really want this to be CSS, there are other tools for processing images but CSS is what I'm looking for.


Solution

  • This can be done using wkhtmltoimage

    1. Install wkhtmltoimage

    2. Create an html document with a link to your image and the various css in it. cake_corners.html:

    <img src="cake.jpg" style="-webkit-border-radius: 50px;">

    1. Run wkhtmltoimage. You might need to use a "crop width" flag.

      % ./wkhtmltoimage --crop-w 660 --format jpg cake_corners.html cake_corners.jpg

    The output will be your image with the styles applied to it. You'll probably need to play with it a bit.

    source image image with CSS applied