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/canvaszoom.php)
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 (3rd May, 2011):
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 availble on GitHub here: https://github.com/akademy/CanvasZoom
UPDATE 2 (25 July, 2011):
I’m mostly working on BitBucket now. Get the latest code here: https://bitbucket.org/akademy/canvaszoom/downloads
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!
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 GitHub here: https://github.com/akademy/CanvasZoom
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
Hi Ted,
You are right, IE8 does not have the canvas element, though the newest release IE9 does (but IE8 will be round for a long time yet).
You could try ExplorerCanvas to bring the canvas to IE – I have no idea if it works though. You can get it here: http://code.google.com/p/explorercanvas/
Mat
i added some scrolling-restriction to your code
http://pastie.org/1730250
it would be nice if you could state that your code is MIT or BSD licenced so one could use it for work-purpose (as i would need to)
http://www.opensource.org/licenses/mit-license.php
http://en.wikipedia.org/wiki/BSD_licenses
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)
Hi,
You might like to fork the project on GitHub. You can make additional changes when you like then and I can pull any changes in to the main one. Here: https://github.com/akademy/CanvasZoom
You are right about the licence, and I’ll try to find one I’ll like soon, but it will certainly allow use by companies.
Now using the MIT license!
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.
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 github here: https://github.com/akademy/CanvasZoom
Just updated with version comment, and other bits. Also attempted an IE9 fix but not tested (- if you’d be so kind?!)
It’s now using the MIT license so feel free to use it on your website.
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.
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.
Thanks for reporting this. I believe i’ve fixed your problem so try downloading the latest files from https://bitbucket.org/akademy/canvaszoom and https://bitbucket.org/akademy/imageloader.
Let me know how it goes.
Is there a way to create the backend systems on a Mac without using zoomfly composer?
Hi. Yep, as you mentioned before parallels should let you run it. But really, there’s nothing very technical with the images it produces so “someone” should be able to reproduce them…
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
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…
Hey Matthew, a belated thanks on this. I can edit the file. That is an easy thing to do. Thanks again!
john
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.
I’ve made a few updates here: https://bitbucket.org/akademy/canvaszoom – you can now specify a default zoom to start at, this should make it easier to fill the whitespace.
I’d also like to know what you had to do to get it working in IE9 – if you could fork the code that would be great!
Great stuff! One of my interesting target platforms is the iPad, where you don’t have plugins like flash required for things like zoomify. So what I then did is play with adding touch support, with the result on my github repo: https://github.com/ptribble/CanvasZoom.
Excellent! Looks like something I should definitely pinch!
Can you constrain the zoom so that the maximum zoom out fills the window instead of being able zoom out to a single dot?
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
Hi, I’m glad you like it.
I think annotations would be a lot of additional work but it’s certainly something I’d consider adding. Maybe you’d like to add an enhancement on this page with a bit more detail:
https://bitbucket.org/akademy/canvaszoom/issues?status=new&status=open