==========
CanavsZoom
==========

Zooming of very large images with the Javascript, html5 and the canvas element. (Similar in functionality to Zoomify, OpenZoom or DeepZoom). This is open source MIT license. Use it as you see fit (an attribution would be appreciated!).

It should work on Opera, Firefox, Chrome, Safari and IE9; and any other browser which supports the HTML5 2D canvas.

Main code updates now on BitBucket: https://bitbucket.org/akademy/canvaszoom/overview

Details
-------

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.

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.


Creating
--------

The back end part of the system consists 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.

   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. Add the javascript to your webpage, you'll also need to get the imageloader.js file from here http://github.com/akademy/ImageLoader

      <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="800" height="400"></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()"/>

See the downloads (http://github.com/akademy/CanvasZoom/downloads) or my website (www.akademy.co.uk/software/canvaszoom/canvaszoom.php) for examples.