Crop logo from Sprite using CSS attributes

Question

Given a sprite, for example, StackOverflow sprite and CSS attributes such as:

background-position: 0px 0px;
width: 250px;
height: 61px;

I am able to crop the logo of the sprite with Chunky PNG library. However, some sites, have negative background-position, such as for example this site: ccs - Which sprite is http://shop.ccs.com/ns/images/ccs-sprite-master-v4.png and have the following CSS attributes for the logo:

   background-position: -300px -100px;
   width: 166px;
   height: 80x;

Since in my crop method I need to pass a starting (x,y) coordinate and ending (x,y) coordinate, I fail to see how can I translate those negatives value to something the method crop can understand. How can I do that?

Answer 1

In CSS, you use negative background-position coordinates, because the image is moved left and up relative to the element's rectangle, so that the expected area is visible inside the element's bounds.

If your library expect to be given the coordinates inside the image to be extracted, then simply negate the background-position coordinates. So, in your example, you would extract the image at coordinates (300, 100), with a width and height of (166, 80).

Now, I haven't had a look at your library's API. There is two other type of coordinates that the crop method you are discussing might be expecting.

If it is exepcting absolute coordinates (that is x1, y1, x2, y2), then simply add the width and height to the left and top coordinates. That would be (300, 100, 300+166, 100+80).

Things are a little bit more complicated if the library is expecting "crop distance from each border". In this case, you need the image full width and full height (let's call name imageWidth and imageHeight, then substract the x2/y2 values in the previous paragraph from the image's dimension. That would be (300, 100, fullWidth-(300+166), fullHeight-(100+80)).

Hope that helps.