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


Tags: css,image-processing,server-side

Problem :

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


    CSS Howto..

    How to set font “ Balzano” to the text in enclosed in

    on my website?

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    How to make sure that two divs appear side by side? [closed]

    How do I have fieldset::before rule account for the legend?

    How to have images in line with text in css

    How to bypass an overriding CSS Declaration

    How to make header in css but im using opacity?

    HTML5/CSS: how to implement a scroll bar

    navigation bar arrow not showing under each tab CSS

    how do i place text opposite to Anchor Tag Using CSS [closed]

    How to prevent automatic onmouseover after onfocus?

    CSS Tooltip has different position in different browsers. How can I account for this?

    • centered, not moving down.. unsure why / how to fix

    How to resolve background-image url inside css file while using azure blob storage

    How does this CSS produce a circle?

    Hiding and showing elements with jQuery flickers in Chrome and Edge

    CSS - How to resize texboxes with background image when browser is resized?

    CSS how to make icons look like they are inside the backround

    How to highlight main label for checkbox input using css or jQuery

    How to make the table fit to the mobile screen size in css?

    How to use horizontal scroll when you have way many columns

    How can I have a blue background on a hover even with css? [closed]

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How to remove extra space under paragraph in HTML/CSS

    How do I hover with text over div img?

    How do i divide my webpage into 3 columns with css, frameset in html makes up too many pages to handle, how can i do it in css?

    How does one right-justify bootstrap pills with css

    How to calculate the multiplication factor for scroll speed on another element so that they both reach end at the same time (top of view)

    How do you refer to more than one .css file in html?

    How can I make my an image?