Add zoom feature?

[dosstx]

Love this tool. Thank you very much for making it. I think you have a great start but one thing that I think would be great is to have some kind of zoom capability.

[alexzorin]

@rsimon's https://github.com/recogito/annotorious/issues/121#issuecomment-866014041 suggests implementing zoom by means of a magnifying lens on the cursor. Cool!

I wanted to add a second interpretation of "zoom" that could be valuable. This would be the ability to scale the rendering of the image up (or down, in fact) past its natural px size, without affecting the annotation functionality.

Something like https://jsfiddle.net/hfm97pw8/1/. The annotation layer doesn't quite do the right thing when encountering an image scaled with CSS.

I imagine this might be problematic to achieve, the magnifying lens would still be amazing on its own.

[rsimon]

Good point - yes, this could also achieve zooming. FWIW: you can make the annotation layer adjust to the size of a zoomed image with a little CSS + HTML trickery. This would work, for example:

<div style="width:200px">
  <img src="https://recogito.github.io/images/640px-Hallstatt.jpg" style="width:100%" id="image" />
</div>

In general, the trick is always to wrap the image in a DIV and apply all the styles to the DIV rather than the image.