Posted on by Matthew Wilcoxson

CanvasZoom – HTML5 Canvas and code

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.

And here it is: The CanvasZoom program drawn with just the HTML5 Canvas and JavaScript. (http://www.akademy.co.uk/software/canvaszoom/)

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.

55 Replies to “CanvasZoom – HTML5 Canvas and code”

  1. This is fantastic! Very nice to see what can be done in HTML5. I am interested in extending this to support high resolution image stacks… e.g. MRI brain scans or other imaging data. So I would like to keep the same abilities of scrolling and zooming, but then add an additional control that would allow me to move through a stack of high resolution images. Any ideas? Thanks!

    Reply

    1. Sounds like an interesting idea. It shouldn’t be to difficult to implement assuming you have layers of images all the same size – basically just switch one image for another. You’d need a list of the images in the correct order, then just remember which is the current “layer” and navigate from one to the next.

      The creation of the tiles shouldn’t be to difficult, I think DeepZoom Composer might do multiple images at once (though the output might be slightly different), but you should be able to automate it anyway.

      It might be nice to switch between a zoom mode and a layer mode maybe via several buttons or just by holding down the ctrl key.

      I’d be interested in seeing what you produce, the easiest way to get started is to fork the project on BitBucket here: https://bitbucket.org/akademy/canvaszoom

      Reply

  2. is there any way to get Canvaszoom working on IE8? Even with some plugin? I need to modify the 100 or so zoomified images on my sites, but IE8 is still the primary browser. Is this because IE8 can’t support the HTML5 Canvas tag?
    Yes I could use both and test for the browser but I would love to skip that step.

    Ted

    Reply

    1. Sorry, i left some german comments in the code, changed the tilesize hardcoded to 512 (because i allready had some GBs of testdata with this size) and line 129 is pretty much stupidity/bug (i could have written something like:
      this.reposition((this.canvas.width – tileZoomLevel[‘width’]) / 2, (this.canvas.height – tileZoomLevel[‘height’]) / 2);
      to make reposition able to behave different when changed or i could have set both offset-values to zero while keeping the effect pretty much the same)

      Reply

  4. You say CanvasZoom doesn’t work with IE, but it does work with IE9. But there is a strange problem: the mose wheel works in reverse, i.e. forwards=zoom out!

    Despite this odd problem I would very much like to use CanvasZoom for my personal website, I’m not sure if this is OK?

    You say it is work in progress. Where is the version number so I can see when you might have upgraded it?

    Thanks.

    Reply

    1. Yes, IE9 working makes sense (it’s a much better version for HTML5 compatibility).

      It’s fine to use it on your website, and to edit it as you see fit. Some interested parties are still requesting a more official licence but I haven’t selected one yet (but it’ll be as open as possible). One coming soon.

      There isn’t a version number so that’s my next job (!), but the easiest way to keep track is through BitBucket here: https://bitbucket.org/akademy/canvaszoom

      Reply

  5. Hi,

    So far I am unable to get this working. Using Chrome and xampp. I cannot get any images to appear, even if I use the example. I have of course downloaded the imageloader.js script, I am confident I followed the README to the word.

    Also if I press the zoom in button a few times I get a JS error.
    “Uncaught TypeError: Cannot set property ‘strokestyle’ of null” canvaszoom.js:405

    Any help would be greatly appreciated.

    Reply

    1. Hi Craig,

      I’m not familiar with XAMPP but if it’s simply an Apache web server then I’m not sure why it wouldn’t work. The error you mention seems to suggest there isn’t any canvas available for you though I would expect Chrome to have one.

      I’ve just noticed a possible issue with the ImageLoader class so you could try using this one instead: http://www.akademy.co.uk/software/canvaszoom/imageloader.min.js (download then copy over your existing one)

      If that doesn’t work, here’s a few others things you can try:

      Maybe Chrome is playing up: Go to http://www.akademy.co.uk/software/canvaszoom/canvaszoom.php and check the CanvasZoom works on you browser
      Maybe you can’t get at your tiles: See if you can access your image tiles directly. The link look something like http://YOURWEBSERVER/tiles/zoom/file.jpg, for instance the above one uses: http://www.akademy.co.uk/software/canvaszoom/Galaxy/tiles//11/3_1.jpg

      I’ll check it out properly tonight if I can.

      Reply

  7. Hi, just a dumb user here . . . can’t write code but is there a way for me to remove the black box line? I solved the other problem by loading parallels on my Mac so please disregard previous question.

    Cheers,
    john

    Reply

    1. Hi. I’m afraid it draws the box in the code, so you’d have to edit the code to remove it. (However, it’s not that hard to do. Download the latest version here: https://bitbucket.org/akademy/canvaszoom/raw/9baf8da17f8c/canvaszoom.min.js and change the bit that says “var u=true” to “var u=false” i.e. switch “true” to “false”…)

      I’ll place an option in a future version which will make it easier to turn the border off and on. I *might* be able to do it this week…

      Reply

  8. Hi, I have been playing around with this and was able to get it to work perfect on IE 9 and Firefox. Is there anyway to make the page load on default with the image filling the entire square with no white spaces? Basically, zoom in on the image a couple of levels so that when the page first loads there is no white space.

    Reply

  11. Hi Matthew,
    I have really enjoyed experimenting with your Canvas Zoom code. How difficult would it be to integrate annotates and/or small markers? I’m using Canvas Zoom with a map and would love to be able to mark it up a little.
    Thanks!
    Greg

    Reply

      1. Matt:
        For drawing, you might want to look at Rafael (http://raphaeljs.com/)
        It also draws on a canvas and works extremely well…even works on MSIE8. If you can somehow change your code to draw on its canvas, it’d kill two birds w/ one stone…getting it to work w/ MSIE and you can use its drawing commands to do annotations (it can draw lines, circles, text, etc.)
        Too bad Rory is trying to hide is drawing implementation instead of contribute it 😛

        Reply

  12. Hi, good coding :).

    I wrote something similar in as3 (flash), and got fed up with flash, so began to port it to javascript+html5, I found your code and used it as a starting block.

    What I am aiming for (as I had it in flash) is basically your code but with drawing added, that updates the canvas. I have got about 2/3 of the way (as I can reuse the php side stuff).

    Basically I am contacting you, as I am thankful for your starting code (saved me porting my version), and would like to give you my improvements in return (minus the drawing bit).

    I have improved many parts (added: scrolling out of bounds, paint one tile in place when loaded, zoom multiplier for custom ratio canvases like mine, link to current location and updating link bar, etc)

    I think you may like to pick through and add some code. my website doesn’t feature the newest version of the mod at all, as I am working on it offline (as plan to encrypt it before I release it on my website to stop hacks of my drawing api).

    If you could email me, I would like to share it with you 🙂
    thanks
    -Rory

    Reply

  14. Hello,

    I have just put together a panoramic photo gallery by using your code. Thank you very much. I was looking for such convenient solution since months and this is just what I needed. It still needs some finishing, but here it is: http://www.photocloud.info/ .

    In order to create deepzoom files , I am using ImageMagick in scripts shells on my linux machine. Basically the two required command lines I use are the following ones, in a loop, decreasing the subfolder number from 15 to 8 in my case.

    $ convert mypicture.jpg -crop 256×256 -set filename:tile “%[fx:page.x/256]_%[fx:page.y/256]” +repage +adjoin mypicture/14/%[filename:tile].jpg
    $ convert mypicture.jpg -resize 50% mypicture.jpg

    Cheers,
    Jerome.

    Reply

      1. Hi Matthew,

        I think this issue is my fault: I need to produce 257×257 tiles instead of 256×256 ones so that it will look as it should.
        I will have a try in a while.

        Cheers,
        Jérôme.

        Reply

  16. Very nice work, thank you!

    I’m working on an application with your solution as base. On top of the drawing, there will be moving objects, which are fed their position through WebSockets. So far, so good. But I do have a couple of issues that I was hoping you could shed some light on:

    I can’t seem to be able to generate deep zoom tiles that are zoomed “deep enough”. The top level is very far away, which is unnecessary. The image that I use to generate the tiles is of very high resolution, so I don’t really understand why Deep Zoom Composer can’t generate deeper zoom levels.

    I keep my moving object on another canvas on top of the background canvas, but I am not sure how to keep the zoom levels in sync? How do I know much is one “level” percentage wise? The moving-object-layer is not a deep zoom canvas as it is continuously changing.

    By the way, the background is originally a DWG file, maybe there is a better way to canvas’ify it than going from DWG to Bitmap to Tiles?

    Any input appreciated! Thanks!

    Reply

    1. Thanks, you project sounds interesting.

      The maximum zoom is actually only as big as the original image, it does not zoom in to the image. The number of levels are defined by how many times the image can be halfed down to a 1 pixel image. There’s much more detail on Daniel Gasienica blog, here. If you’d like to restrict the minimum zoom you can do that in the newest version, see the Bitbucket repository.

      I’m afraid there’s no way to know what the current zoom level is, but it wouldn’t take much work to add this in, see the code and variable _zoomLevel.

      I’m not familiar with the DWG data, but it should certainly be possible to display them in the canvas – however that is well outside the feasibility for this project!

      Hope that’s helpful.

      Reply

  17. Hi Matt,
    I am Domenico a physicist from the south of Italy involved in mathematical projections.

    I’ve just tried your interesting CanvasZoom, but if I open the page on the Computer i can slide the image to choose the part to magnify, on the ipad it’s not possible.

    Why?
    Hoping to listen something from you.

    This is my first attemptive in which i set a detect flash to use flash on computer and fall back to html5 on IOS
    http://www.lecce360.com/t2/

    what about?

    Best Regards

    Domenico

    Reply

  18. Any progress on making layers for this? I want to switch between images with the same level of zoom and co-ordinates…. Thanks.

    Reply

  19. Hi, this is great, is there an easy way to have overlays or layers that resize and pan at the same time as can be switched? store co-ords?

    Thanks

    Reply

  20. Hi dude, and thanks for your work !
    We are a medical imaging software and hardware editing company. While my final-year-internship, I used your lib to provide a Medical Images Viewer and Editor, and I’ve fund an issue in mouseMove when mouse goes out of the canvas. Using relative position of the mouse can break the move of the file, especially while hovering many little divs or a table.
    I’ve made optimisations for this issue, but can’t pull request on your BitBucket.
    I’ve made other optimisations, like preventing images to move to more than the middle of the canvas (maximum move makes the canvas filled at his quarter).
    Where do you want me to propose you these optimizations ?
    Please answer by mail.
    Regards.
    Brice Andreota @ SystemX

    Reply

  21. Great piece of code, thanks for sharing it.

    I got a first test example going fine. One issue I am running into is that most of my images are big, but that BIG BIG like some of the traditional deep zoom examples. Typical size will be around 3500×3500

    With images of that size, and the 1/2 reduction in size per zoom its not granular enough and image shrinks/expands too rapidly to take advantage of proper zooming.

    Do you see any inherit drawbacks/issues of editing canvaszoom to operate off a zoom/tiling scheme that scales in increments of 20% instead of 50%? Just starting to dig into the code now, seems like it should be pretty doable, and editing of my “tiling” processor will be straight forward to support the same deepzoom scheme but have several more layers

    Reply

    1. Hi.

      At the moment the zoom levels map directly to the deep zoom image tile levels. So as long as you do generate the tiles to the same fraction (i.e. your 0.2) as the zoom I think it should work.

      If you do manage to get it working an additional setting (with default to 0.5) would be nice and I can copy it to the main repository.

      Good luck!

      Reply

    2. Hi. Did you ever post the code on bit bucket? I’ve been looking for something to start with for a tool I want to create and this is ideal. I love the scalable tagging properties now. In my concept I wan’t these to be controlled by the user. When the user creates a tag it becomes an element with much more functionality. It could be an ecommerce item for instance. Or the start of a conversation which would tie into a blog. Thanks

      Reply

  23. i want to implement something like openslide.org/demo

    i have a .svs type slide and i want to view it as a deepzoom image on my html page.
    please help. it would be a great help SIR.
    thnks in advance.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.