iPhone: Splitting images into tiles for faster loading with ImageMagick
iPhone developers! I found an easy and automated way to cut an image up into tiles at different zoom scales for the purpose of UIScrollView image tiling as shown in Apple’s ScrollViewSuite sample code!
Just get imageMagick, a command line image editor you can get from MacPorts. I made a bash script to automatically resize and tile at 100%, 50% and 25% resolutions.
tile.sh:
#!/bin/bash
file=$1
function tile() {
convert $file -scale ${s}%x -crop 256x256 \
-set filename:tile "%[fx:page.x/256]_%[fx:page.y/256]" \
+repage +adjoin "${file%.*}_${s}_%[filename:tile].${file#*.}"
}
s=100
tile
s=50
tile
s=25
tile
If you run: tile.sh bigimage.jpg it’ll dump out 256×256 sized tiles called bigimage_100_0_0.jpg, bigimage_100_0_1.jpg etc for each tile at 100% scale, as well as bigimage_50_0_0.jpg et al at 50% scale etc.
12 Responses so far
Douglas Schmidt
November 19th, 2010
11:48 am
Hey!
I’m having a little bug that you may be able to help on with.
I’m using the same code of yours and the same code from PhotoScroller provided by Apple and MY tiled images are rendered with a thin line between tiles!
My first guess was that the size of the tiles was not matching with the calculations on code, but change sizes didn’t fix.
Does you got this as well? Any advice?
Mike Lin
December 1st, 2010
11:19 pm
Oops sorry for the late reply. Probably solved this by now, but did you make sure to remove the lines in the PhotoScroller example code that renders a line between tiles for demo purposes? For me it’s at TilingView.m:123
Bill Sumner
April 8th, 2011
8:46 am
Your script was a treasure to find through Google, and exactly solved my problem. Thank you very much!
Lifemoveson
May 5th, 2011
12:40 pm
Is it posible to use some scripting on the fly to create such images on iphone application like PhotoScroller example ?
MiKL
November 22nd, 2011
10:07 am
Thanks a lot. This really works very well and is sure way faster than doing it by hand…
Andrew
December 5th, 2011
11:56 pm
Hi,
By using the PhotoScroller example, can i make it to Panoramic Style?
Andrew
December 7th, 2011
12:14 am
Hi all,
I got these errors when run the bash file.
./tile.sh: line 4: convert: command not found
./tile.sh: line 4: convert: command not found
./tile.sh: line 4: convert: command not found
aaron
February 13th, 2012
7:43 am
Andrew you need to install imageMagick
Toby
February 27th, 2012
11:17 pm
Thanks a lot! After a long install of ImageMagick, this code made my day.
Andrew
March 5th, 2012
4:12 am
Noted. Thank you, Aaron..
Luca
April 4th, 2013
9:52 am
i’ve installed imagemagick without problems, i’ve deployed your script in a folder with the image and run the script through terminal but the error is the same:
-bash: tile.sh: command not found
any ideas?
Mike Lin
April 4th, 2013
3:55 pm
You should run ‘./tile.sh’ with the ‘./’ . you’ll probably also have to run ‘chmod u+x tile.sh’ to make it executable.
Leave a comment