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 position a div in the absolute center of a page?

    How can I control the height of an Option element in Webkit?

    How can I take just a part of CSS from other site's when using bootstrap?

    Progress Bar in jquery showing reverse animation

    How does Twitter put labels inside textboxes?

    How to change different language to different font-size at same line without unique each container?

    How can I centralize this jquery styling colors into css?

    How to prevent outer
    CSS from affecting inner
    CSS

    In Firebug, how to tell what is overriding a style?

    Any ideas how to replicate this inline dropdown menu using css/jquery

    How to use different CSS opacity in a nested div? [duplicate]

    How to remove space between bootstrap columns?

    Panel in Horizontal List item showing behind Button

    How to build a hover effect with css only, or css+jquery

    How to display data from a file on website load? [closed]

    how to add a border-radius css curl

    How to have a table scroll only within a custom control on page? CSS help needed

    How to Obtain Contents of HTML Element in CSS

    CSS: how can I hide a div when its text doesn't fit?

    Hiding and Showing Content using CSS3, Want hidden state the be the default

    How to resize CSS Box with increase in content

    How to apply a complex style to the selection of a Select2 component?

    How to get text in css to appear in the vertical middle

    How to add-class and focus the children on keydown function

    Resize the content of a div based on how many objects are in the div

    What CSS properties govern how a webpage reacts to window resizing?

    How to apply text rotation in CSS?

    How to call apk font use CSS in android?

    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]

    Django + Mac osx how to use less css?