Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
#!/bin/bash
#
# Usage:
# PADDING=10 HTML_NORMAL=normal.html HTML_HOVER=hover.html ./webkit_sprite
#
if [ -z "$PADDING" ]
then
echo "You need to specify PADDING"
exit -1
fi
if [ -z "$HTML_NORMAL" ]
then
echo "You need to specify HTML_NORMAL"
exit -1
fi
if [ -z "HTML_HOVER" ]
then
echo "You need to specify HTML_HOVER"
exit -1
fi
if [ -z "$OUTFILE" ]
then
OUTFILE=sprite.png
fi
webkit2png --transparent --wait 1 --output=/tmp/css_normal.png file://$(realpath ${HTML_NORMAL})
webkit2png --transparent --wait 1 --output=/tmp/css_hover.png file://$(realpath ${HTML_HOVER})
convert -trim +repage /tmp/css_normal.png /tmp/css_normal.png
convert -trim +repage /tmp/css_hover.png /tmp/css_hover.png
montage /tmp/css_normal.png /tmp/css_hover.png -background transparent -tile 1x2 -geometry +0+0 /tmp/css_combined.png
IMAGE_WIDTH=$(identify -format '%w' /tmp/css_combined.png)
IMAGE_HEIGHT=$(identify -format '%h' /tmp/css_combined.png)
CROP_WIDTH=$(expr ${IMAGE_WIDTH} - ${PADDING})
convert /tmp/css_combined.png -gravity west -crop ${CROP_WIDTH}x${IMAGE_HEIGHT}+0+0 +repage /tmp/css_left.png
convert /tmp/css_combined.png -gravity east -crop ${PADDING}x${IMAGE_HEIGHT}+0+0 -background transparent -extent ${CROP_WIDTH}x${IMAGE_HEIGHT} /tmp/css_right.png
montage /tmp/css_left.png /tmp/css_right.png -background transparent -tile 1x2 -geometry +0+0 ${OUTFILE}
echo "File written to ${OUTFILE}"
rm /tmp/css_normal.png
rm /tmp/css_hover.png
rm /tmp/css_combined.png
rm /tmp/css_left.png
rm /tmp/css_right.png
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment