You may have seen the program Zoomify, or similar programs like, OpenZoom and DeepZoom, which quickly display large resolution images on websites without large amounts of data being downloaded – only the part which is needed is downloaded. Most of these applications use some kind of plugin to work (e.g. Flash or Silverlight), so I wanted to see if we could create one without any plugin, using only the HTML5 standards.
Image of Spiral Galaxy NGC 1300 from Hubble Site
You can zoom with the mouse either with the scroll wheel – forward to zoom in, backward to zoom out – or by clicking the select button to zoom in. The buttons beneath the canvas can also be used.
Here are a few more examples:
The back-end part of the system simply consists of several folders full of images of different resolution. These images use the format that the program DeepZoom Composer generates (created by Microsoft), there’s also lots of information about the format here. The DeepZoom program currently only works on windows but once you’ve download it you can create your own zoom images, very quickly (But there’s really no reason why this DeepZoom format can’t be recreated by writing another program – something that might come later.)
There are currently no on screen controls to zoom in or out, but that should be a fairly routine addition.
Have a look at my website for details instructions on how to add the CanvasZoom to your own website here: http://www.akademy.co.uk/software/canvaszoom/canvaszoom.php
I also want to mention “Daniel Gasienica” who was the creater of OpenZoom, as he had done some of the hardwork already. See his blog here.
UPDATE (23rd June, 2012):
The CanvasZoom is now available under the MIT license so feel free to use it in any way you like. The code also had a nice clean up. The latest version is available on BitBucket here: https://bitbucket.org/akademy/canvaszoom/.
And you can now use the zoomify format. Just see the documentation on bitbucket.