jakearchibald/sprite-cow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Sprite Cow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually.

However, copying all the positions & sizes from graphics apps wasted a ton of my time, so I made this!

Currently available online for you to use at http://spritecow.com

Changes

2012-06-27

• Added option for percent-based positioning
• Added option to scale sprite 50% for retina users

2012-06-06

• Switching to Sass for CSS
• New logo, thanks to Stephen Waller
• Tidied up some design bits and pieces

2011-12-05

• Fixed issue in Firefox that prevented filename being picked up
• Added appcache for offline use & faster loading while offline

2011-09-05

• Making more room for the spritesheet view

2011-08-07

• Adding Twitter details

2011-08-05

• Added "Reload image" button
• If you open the same image twice, it now reloads the image

2011-07-25

• Bits of CSS & JS that stopped things working in Opera
• Bits of CSS & JS that stopped things working in IE10 (some remaining layout issues though)

2011-07-20

• Picks up the file name through drag & drop as well as the 'open' button

2011-07-04

• Can change CSS path
• Changing labels from 'Select' to 'Open' when opening files

sprite-cow's Issues

So, abandonware?

I can see the last commit was many years ago and it doesn't currently work on chrome and hangs in firefox.

Copy CSS button

It'd be good to see a "copy CSS" button so you don;t have to select the CSS lines yourself. Maybe even a button at the top tool bar.

Yes some people are lazy. But I guess if it's possible, why not?

New Feature - Repeat option

Ok, it can be done by simple css altering but if you are working really fast it would be nice to implement uploading of images to gather on a sprite board and then also have an option at the bottom to change the no-repeat option. Maybe repeat-x or repeat-y.

Percentage positioning doesn't seem to do anything

I am trying to get positioning by percentage, but clicking the "percentage positioning" button doesn't seem to have any effect.

Feature Request: Order of CSS properties

Hey,

this is an extremely minor feature request.

In my stylesheets I like to have the position related selectors appear above the styling ones, so each time I copy & paste the SpriteCow CSS I have to do some minor reshuffling.

For example:

width: 17px;
height: 17px;
background: url('/images/interface/bg/bg-sprite.png') no-repeat -230px -1px;

It would be great if I could drag/drop the selectors into the order I want and this be saved in local storage (like the file path feature).

Thanks for a great tool!

Add ability to create/modify sprite images

Sprite Cow is awesome, but it'd be even more awesome if it could be my one-stop-shop for spriting.

I.e. let me upload multiple images/icons into sprite cow, and then provide some quick tools for auto-arranging them into a sprite (and generating the consolidated image).

Yes there are already a bunch of sprite-generating tools out there (e.g., SpriteMe.org, csssprites.com, etc.), but creating and modifying sprite images feels like it would go hand-in-hand with what Sprite Cow already covers.

shift-click to generate multiple css entries

Holding down shift and clicking an additional sprite would create a separate bounding box and CSS entry. CSS entries could be named sprite1, sprite2, sprite3, etc...

See whole image at once

I often work with very tall, narrow spritemaps. I'd like to see the whole image at once, rather than have a scrolling box in the middle of the page.

I realise this could be interpreted as a personal preference, it's not really a proper 'issue'.

feature request: image-region

In addition to offsets, display the 'image-region'

 -moz-image-region: rect(4px, 76px, 36px, 40px);

Option to switch off the background pattern

Transparent backgrounds are always displayed in either dark or bright background pattern making it nearly impossible to see fine structures in an image.

Beside having the option to switch the background between dark and light themes, it would be very good to display transparency as white or a selectable color.

Feature: CSS Code & Classes

First of all. Thanks for that great tool. We've been using it many times.

Nevertheless, we have to copy paste, copy paste many times. It would be very usefull, to save the css-code in the tool or import it, and the tool could sync the css code with the canvas, so that the user can edit it anytime. So you don't have to copy paste & copy paste the code all the time, when you work longer time on a project or update your sprite.

Is there a plan, for new features like this? If not, that would be very disappointing, although it stays great service. Thanks a lot!

Yours Sincerely
Vincent

Typo in example image

The image used for the example (/www/assets/3/tutorial-sprite.png) has a typo in the first block of text:

"Click to get their backgroud-position..."

Very minor but distracting.

Not a plugin for Adobe Photoshop.

This is a wonderful site and I appreciate your work very much!

If you could make this into a Photoshop Extension/Plugin, I would be more than happy to buy it!

Thanks and keep up the good work!

Website is down

http://www.spritecow.com/ is down :(

Feature: Page refresh confirmation

Maybe I'm too much distracted but I always refresh the sprite cow tab instead of the project page.
It would be nice if implemented a javascript refresh confirmation.

Allow a user to specify width/height

A big use case for sprite sheets is for icon sets, with each icon often fitting within a standardised space (eg. 16x16 pixels).
However, some of the icon images don't always match those dimensions - they might be 16x13, for example, which is what Sprite Cow picks up.

I'd love to be able to specify width/height and have Sprite Cow auto-centre the detected icon within that space.

Cheers,

Gil

Show boundaries of image

I would like to see the boundaries of the image.

An example where this is useful: I often use centred sprites with background-position: 50% npx; to guarantee icons are centred in a box. It would be nice to confirm visually that they are centred.

Explore workarounds to 'Fetch image by url'

Can't fetch images by url as it throws a cross-domain error when we try and read pixel data from an img hosted on another domain.

Might be worth exploring drag & drop of images from another browser window, although I'm pretty sure this transfers as a uri-list.

Another possibility is using a bookmarklet. It could allow the user to select the bg image they wish to inspect & serialise the image as base64 into either window.name or www.spritecow.com/#base64

Image drag and drop

It would be nice if images could be dragged & dropped into the editor (it works now for files, but not for images inside the browser). Very cool tool otherwise.

Selection history with management

each selection will be added to a list of property that can be removed.
so after a few selection on the image I'll get a bunch of sprites ready to copy paste.

Output sprite as base64

Pretty easy to do, although I like to compress the hell out of a png before I base64 it and I don't think the png encoders in browsers are well optimised.

Drag & drop an image

Pretty please? :)

Tab Crash if file is in use.

Browser: Google Chrome 22.

Issue: If the file is in use by another program (eg: open in Photoshop) the browser tab will crash when attempting to open the file. I have not tested in other browers.

Repeatable: Yes.

Feature request: Multi-select to bulk CSS and possibly bulk/inverse selection

This tool is fantastic. Great work!

I'm not sure if this is currently supported and I missed how to do it, but it'd be great if I could make many selections at once and get the output of all the highlighted regions in bulk CSS. Once outputted, if that CSS was editable for replacing the classnames, even better.

To make multi-select faster, the ability to select the entire transparent space and then get its inverse in multiple selection blocks would be a really useful accelerator. If some icons contain internal whitespace, they could be manually cleaned up into a single selection through the same multi-select gesture (shift or cmd?).

Again, great work!

Change background colour/pattern

The Photoshop-style checkerboard effect is fine in most cases, but if your sprites are white they can be difficult to see.

Add an option to change the background colour, maybe even just a toggle to switch to a dark checkerboard effect.

Only difficulty here is how to represent it in the toolbar without it getting confused with 'pick background'

Add Quick Copy Functionality

This is a great little app! I was thinking it would be nice to quickly copy the generated CSS. That way you can copy and paste the CSS to a text editor. I came up with a simple solution, but it doesn't look too nice in the browser.

https://github.com/spadin/sprite-cow/commit/5b60a928a55b20b11ed92cc00fff3f4bac65b514

Unable to find out image boundaries.

I have tried spritecow on this image. some reason its not able to find the image boundaries with in the sprite.

http://q.ebaystatic.com/aw/mobile/mobileWeb/popular_categories/spr/us-q25-v1.jpg

Is it the problem with image creation ? i have created this sprite image with image magic from multiple images using following command.

montage -tile 1 -geometry +1+0 -gravity Center -extent 280x212 1.png 2.png x.png

Add support for Sass syntax

I love this project, and it has helped me greatly. The only thing that could make me love it more would be support for Sass.

Favicon please

I can never find my spritecow tab in amongst by million chrome tags as it defaults to the google favicon for some reason. Some sort of cow based favicon would be great.

Free selection

Hey there,
first away: I LOVE spritecow! Its so damn useful.

But I have a problem with it: since I am creating my spritemaps in a way where I hate to waste any pixel I put all my sprites together so that there is no space between them. Bad thing for sprite-cow: it can't determine where one sprite starts and another stops and selecting the whole spritemap all the time!

My suggestion:
Add a tool where a user can make a manual selection. Maybe display a magnifier while he's using the tool to make pixel-perfect selections.
Would be a great addition and would make the tool absolutely perfect in my eyes :)

greetings from germany

Support for svg sprites

http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
it would be great if svg sprites would work in sprite-cow too.

Auto-copy position values on click

Hi, great little app, thanks.

Would it be a good idea to automatically copy the position values (e.g. "-100px 93px") when clicking a sprite part?
I feel like the copying of the CSS slows down the process a lot...

Cheers,
Jelmer

Whole Canvas being selected every time

Steps to recreate:

• Chrome 12
• 'Pick Background'
• Click on Canvas (anywhere)
• 'Select Sprite'
• Click on Canvas and the entire image is selected every time

Freezes in Firefox

When you try and select something, it freezes. Only in Firefox.

Zoom option to aid in selection of small images

On a 24" monitor with 1920x1200 resolution it is very tedious to select very small images.
It would be great to have a zoom option so you can enlarge the display and have better selection possibility with the mouse.

Reopen a refreshed image.

When i try to open the same image again nothing happens. Although i have made changes in the image itself. The only possible way now is just refresh the page and open the image again.

adding your own image path

I am able to add the path to the image file, but not change the image file name it's self. Is this intentional? or perhaps a chrome bug? (the pointer icon appears over the filename section too, but clicking only makes the path editable.

Cheers.

Amazing tool. Thanks for your hard work.

Customise CSS images path & background vs background-position

Allow the user to set the images/ path, use localstorage to remember this.

Also, allow the user to toggle between background shorthand and just background-position

Possible bug

Hi!!

First of all, congratulations for this amazing project ;)

I was watching your code and maybe I found a bug. Excuse me if I was wrong.

In SpriteCanvasView.js, everytime you activate SelectColorProto and SelectAreaProto, you push in _listeners array a new listener, but this array has never been cleared. Maybe you have to clear it or initialize the array evertime you call activate.

I repeat, excuse me if I'm wrong

Optimise by reducing calls to getImageData

The current performance bottleneck is getImageData, which is called each time the search area is expanded.

Abstract the search area from the pixel data, so the pixel data area can increment in large steps, perhaps 100px.

It might even be quicker to getImageData the whole image, or at least, do so after n iterations.

In dealing with potentially large arrays, it might be worth converting them to Uint8Array if available. Although the conversion may cost more than it saves.

Example Image link not working in chrome

The link in the body "Load the example image" doesn't work for me in Chrome 12.0.742.91 beta. It tries to load http://www.spritecow.comassets/1/tutorial-sprite.png. Works fine in FF and the div.demo-btn works in chrome.

Thanks for a very handy tool!

We want more features like Grid System, multiple file upload,etc,..

We want more features like Grid System, multiple file upload, auto arrange, user defined name for css.

Add controls for background-size

Sometimes background scaling is not used only for 'retina' devices, so being able to control the size would be even more useful than just '2x' as you have now.

In any case, nice tool, thanks a lot.

Feature request - High resolution sprites

Hi,

I've been doing more and more mobile dev for retina display and I am still using Sprite Cow to calculate my width and height. I always end up dividing by 2 to have my background-position/height/width.

Maybe you can have a checkbox to divide the results?

Thanks!

Not working in chrome. At all.

Spritecow isn't working in chrome. It's not even showing me the actual website.

Tested on Mac OS and Windows.

Auto copy to clipboard

It would be more productive if generated CSS will copied to clipboard automatically after it's generated.

ps. Thank you for amazing tool.

Add chrome frame installer for IE users

Good to put it through its paces, in case we use it for projects at theTeam

Add CSS Multiple line with Run Class Number

https://github.com/mean-cj/sprite-cow/blob/master/www/assets/8/script/CssOutput.js

Add Run Class Number After Click Image position

.sprite_1 { background: url('imgs/ProductPack_03.jpg') no-repeat -64px -24px; width: 96px; height: 88px; }

.sprite_2 { background: url('imgs/ProductPack_03.jpg') no-repeat -224px -24px; width: 96px; height: 80px; }

.sprite_3 { background: url('imgs/ProductPack_03.jpg') no-repeat -408px -16px; width: 88px; height: 88px; }

---

Fix Overflow
https://github.com/mean-cj/sprite-cow/blob/master/www/assets/8/style/all.css

.canvas-inner {
min-height:400px;
}

percentage based positioning

would be cool to have percentage based positioning instead of pixels.

Error handling for corrupt images or no pixel data access

Provide some kind of error messaging if an image cannot be loaded, eg the format is corrupted

Browsers are currently lazy with SVG files and never allow access to pixel data for security reasons, as SVG images may contain images from other domains. Loading an SVG currently works but throws an error when a selection is made.