MikeLin.ca

The Blog Lives

Jun

5

iPhone: Splitting images into tiles for faster loading with ImageMagick

By Mike Lin

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

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?

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

Your script was a treasure to find through Google, and exactly solved my problem. Thank you very much!

Is it posible to use some scripting on the fly to create such images on iphone application like PhotoScroller example ?

Thanks a lot. This really works very well and is sure way faster than doing it by hand…

Hi,
By using the PhotoScroller example, can i make it to Panoramic Style?

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

Andrew you need to install imageMagick

Thanks a lot! After a long install of ImageMagick, this code made my day.

Noted. Thank you, Aaron..

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?

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