1

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.

OneSolitaryNoob
  • 5,423
  • 3
  • 25
  • 43
  • 1
    imagemagick can work wonders for you. google search it – Kai Qing Jan 14 '15 at 00:03
  • 2
    Why on earth would you want to use CSS to process images? Use a php or .net image processing library – Turnip Jan 14 '15 at 00:03
  • 1
    as upsidedown is suggesting - you are incorrectly applying "css" in your request. You really mean to ask if there are any image processing libraries out there that can achieve the same effects as css – Kai Qing Jan 14 '15 at 00:04
  • thanks kai and upsidedown, i use graphicsmagick but css is what i'm looking for, lots of features and known by so many people. – OneSolitaryNoob Jan 14 '15 at 00:12
  • CSS doesn't actually process the images though - only styles them and on the client side, not the server side. CSS may be known by many people, but it doesn't do what you necessarily want it to do. What is the end goal for this request? – disinfor Jan 14 '15 at 02:21
  • Imagine this, you have a team web developers that know how to write CSS, but they're dealing with a client that can't do CSS. You could have your team learn something totally new OR you could find a way to let them keep writing CSS but have it interpreted somewhere other than the client. – OneSolitaryNoob Jan 14 '15 at 08:03
  • I see a post about taking a screenshot from a web browser http://stackoverflow.com/questions/125951/command-line-program-to-create-website-screenshots-on-linux – OneSolitaryNoob Jan 14 '15 at 08:06

1 Answers1

1

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

OneSolitaryNoob
  • 5,423
  • 3
  • 25
  • 43