ptribble / canvaszoom Goto Github PK

==========
CanvasZoom
==========

Zooming of very large images with the Javascript, html5 and the canvas element. (Similar in functionality to Zoomify, OpenZoom or DeepZoom). This uses the open source MIT license, use it as you see fit (but 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.

This version by Peter Tribble adds touch support, tested on my iPad and
Android phone.

Description
-------

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 by either the scroll wheel - scroll forward to zoom in, backward to zoom out - or by clicking the select button to zoom in. You can also add buttons outside of the canvas to zoom in with.


Use
--------

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 (http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=24819). 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 DeepZoom composer installed create a project (on the local machine, network positions don't seem to work) then choose an appropriate image and import it with "Add Image". Now go 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 set the quality to 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 include the imageloader.js file from here: https://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 controls 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()"/>

Examples
------
    http://www.akademy.co.uk/software/canvaszoom/canvaszoom.php