Zooming into images

I spend rather a lot of my time working with images. Scanning and digitizing is one thing we do on a fairly large scale.

To allow customers to see image detail at high resolution, we use Zoomify extensively. We generate the images in advance, using ZoomifyImage. OK, so we end up with huge numbers of files to store, but this is the 21st century and we can cope with it.

There are other options available that do similar things, of course. Just to mention a few: Deep Zoom, OpenZoom, and OpenLayers. One snag with some of these zooming capabilities is that they require browser plugins (Flash or Silverlight). Not only does this hurt users who don't have the plugin installed, but some platforms (OK, let's call out the iPad here) don't have any prospect of Flash or Silverlight.

However, modern systems do have HTML5 capable browsers, and HTML5 is really powerful.

A quick search finds CanvasZoom, which is a pretty good start. Given a set of Deep Zoom tiles it just works. I tried it on an iPad and it sort of works, not really doing touch properly. So I forked it on github (with ImageLoader for compatibility) and played with adding touch support.

It turns out the adding touch handling is pretty trivial. There's just the touchstart, touchend and touchmove events to handle. You want to call event.preventDefault() so as to stop the normal platform handling of moves in particular. The only tricky bit was working out that while you can get the coordinates for touchstart and touchmove from event.targetTouches[0], for touchend you have to look back at event.changedTouches[0]. So, poke the image and it zooms, poke and move and you can pan the image.

One thing I mean to do is to look at whether I can point it at a set of Zoomify tiles. I've already got lots of those, and just having one set of image tiles saves both processing time and storage. If not, I'll have to generate a whole load more images - I'm using deepjzoom which seems to do a pretty good job.