CanvasZoom app

So, here it is, the CanvasZoom app drawn with just the HTML5 Canvas and JavaScript:

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.

It works very well in Firefox 3.0+ and Opera 11+ . It deosn't work in IE (even with Google's excanvas). I suspect it'll work in Safari and Chrome, and I'm working on a Mobile version.

Create your own

The backend part of the system simply consits of several folders full of images of different resolution. The images are most easily generated by the DeepZoom Composer program created by Microsoft, there's also lots of information about the format here. The DeepZoom Composer program currently only works on windows but once you've download it you can create your own zoom images, very quickly.

DeepZoom is rather old now, but you can use a replacement. You can use a system called OpenSeadragon which uses the same file format behind the scenes. Check it out at OpenSeadragon.

1. Once you have it installed create a project (or the local machine, network positions don't work) then choose an appropriate image and import it with "Add Image". Now goto to Export and select Custom. Change output type to "Images", give it a name, select "Export as a collection", ensure "Enable Smooth Streaming Support" is off, Format JPEG, and quality whatever you like (high recommended). Click Export.
   
   Once it's finished open the folder you saved to. Open the subfolder "dzc_output_images", the subfolder ending in "_files" is the one you need to copy to your web server. (If you have a look in the folder you can see you images cut up into smaller sections at different zoom levels).
   
   
2. Once you have your images, download these two javascript files (minified via CompressorRater using YUI Compressor 2.4.2) :
   • ImageLoader.js or minified ImageLoader.min.js (This image loader class is generic enough to be used in any project, like this one).
   • CanvasZoom.js or minified CanvasZoom.min.js

   and add them to your webpage:
   

   <script type="text/javascript" src="imageloader.js"></script>
   <script type="text/javascript" src="canvaszoom.js"></script>
   

3. Now add a canvas and then call the CanvasZoom class to do it's stuff with a little Javascript:

   <canvas id="galaxyCanvas" width="600" height="300"></canvas>
   <script type="text/javascript">
   var galaxy = new CanvasZoom( document.getElementById('galaxyCanvas'), "Galaxy/tiles/", 6637, 3787 );
   </script>
   

   The CanvasZoom is called with four parameters:

   1. The canvas you want to use. (Best results are achieved when the canvas has a similar aspect ratio to the original image)
   2. The folder where the images are stored.
   3. The width of the original image.
   4. The height of the original image.
4. If you'd like to add some button (or other control) to zoom in and out you can call the class functions "zoomInCentre()" and "zoomOutCentre()". Adapting the above code it would look like this:

   <input type="button" value="Zoom in" onclick="galaxy.zoomInCentre()"/>
   <input type="button" value="Zoom out" onclick="galaxy.zoomOutCentre()"/>