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 really include html codes inside php

    how to properly use css in jsf?

    How to change the color of header?

    How to center an attribute is position is absolute?

    How to create a sliding navigation with either jquery or css? [closed]

    navigation bar arrow not showing under each tab CSS

    How should I make this code to display inline

    jQuery UI Tooltip with Arrow, why/how does this code work?

    CSS: How to position divs 2 by 2

    How to get the type of the DOM element to fix the CSS Selector

    How to set CSS rule for a DIV in a LI of class UL?

    How overlay two pictures to another using HTML-CSS?

    How to move box-shadow?

    How to do a full bleed background image that scales with resolution in css/javascript? [duplicate]

    How to make flash movie to scale proportunatly to div width?

    Writing CSS rules to different browsers, how? [duplicate]

    How to define alternative font-family corresponding to font-size CSS

    In css how to display multiple divs?

    How to implement this logic in CSS?

    How do I change my link's image on click?

    How to assign CSS to images which have specific extension, height and width?

    How to use CSS to style 4 blocks of Info in the homepage?

    How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    How to set a child's element 50px narrower to its parent element in css? [closed]

    how to create a css translateY on hover effect

    How can this effect (line breaks) be achieved with CSS and/or Javascript

    How can I have multiple jQuery button styles on one page?

    How to align the header menu from left? i see a unexpected margin on left. Help please

    How to hide and fade div using jquery and css

    How to override a templates default option with javascript and css