Magnifying parts of an image

Anvil Q&A
1

Apologies if this has been covered previously. I am building a website that displays images, and I would like to be able to magnify parts of the images. This is possible if I use a canvas component rather than an image component (as with the wombat example). However, I am using the Material 3 theme and if the sidebar closes the screen effectively resizes and the canvas component disappears (so it isn’t as responsive as an image component?).

Also, I need to preserve the aspect ratio of the images if the canvas changes, and it seems I can only set the height and not the width of the canvas. Is there a way to preserve aspect ration within a canvas component?

Has anyone solved these problems with canvas or, alternatively, has anyone successfully integrated magnifiers such as magnify.js or zoomify into an Anvil app?

Thanks

2

You might want to go through this canvas tutorial: Canvas Tutorial It explains how to keep the canvas drawing through resize events.

3

Many thanks Jay, The tutorial really opens up canvas, it will be invaluable. And, it even includes tiled-images which I had given-up on being able to use!
S

1 Like