52 Comments

  1. Sean Hill says:

    February 22, 2011 at 6:50 am

    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!

    • says:

      February 23, 2011 at 12:00 am

      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

  2. says:

    March 16, 2011 at 5:40 pm

    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

    • says:

      March 29, 2011 at 10:26 am

      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)

  3. Richard Beal says:

    April 25, 2011 at 10:26 am

    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.

  4. Craig Taylor says:

    July 11, 2011 at 1:22 pm

    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.

  5. says:

    August 22, 2011 at 12:56 am

    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

  6. David says:

    October 4, 2011 at 2:50 pm

    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.

  7. John Feeman says:

    November 9, 2011 at 8:09 pm

    Can you constrain the zoom so that the maximum zoom out fills the window instead of being able zoom out to a single dot?

  8. Greg says:

    December 1, 2011 at 3:56 am

    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

  9. says:

    February 1, 2012 at 8:55 am

    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

  10. says:

    February 22, 2012 at 7:35 pm

    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.

  11. Peter says:

    April 12, 2012 at 3:04 pm

    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!

    • says:

      April 13, 2012 at 7:39 pm

      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.

  12. Domenico says:

    August 18, 2012 at 11:43 am

    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

  13. iain says:

    October 9, 2012 at 3:20 am

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

  14. iain says:

    October 16, 2012 at 3:44 am

    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

  15. says:

    November 29, 2012 at 11:51 am

    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

  16. Nate says:

    February 6, 2013 at 1:24 am

    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

Leave a Reply

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

To comment, click below to log in.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>