search

annotorious / annotorious-v2-plugins

Plugins compatible with the RecogitoJS, Annotorious and AnnotoriousOSD annotation libraries
BSD 3-Clause "New" or "Revised" License
28 stars 20 forks source link

Add zoom feature? #13

Open dosstx opened 4 years ago

dosstx commented 4 years ago

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 commented 3 years ago

@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 commented 3 years ago

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.