Anvil Community Forum

Image Zoom on mouseover

I am trying to implement a form where an image is presented (from a URL) on the left of a page with some text boxes on the right to enable users to transcribe and submit key information from the image, before submitting and loading the next image.

I have managed to get the image to display fine (along with some image rotation buttons), but ideally I want to use something like this jQuery plugin:

https://github.com/thdoan/magnify (demo)

This will enable users to see zoomed image sections when they mouseover (hopefully without losing focus on the input text box). Is this possible in Anvil? Thanks!

Yes, you can do something like that in Anvil. Here’s an app that does it:

https://anvil.works/build#clone:4EZHJ3E3LVREBPUG=Q75ZMLSLG5K6LY6KRJ54YIJZ

https://magnified-wombat.anvil.app/

It uses our Canvas component. The Canvas component has a mouse_move event that gets the x, y position of the mouse, so we can draw a zoomed-in circle at the mouse position.

In particlar, it makes use of a method we added recently for drawing part of an image onto a Canvas - draw_image_part. The comments in the code lay out the sequence of operations.

  1. First, the Canvas is cleared.
  2. Then a square is drawn at the magnified size.
  3. This is masked off into a circle
  4. The border is drawn around the edge of the circle
  5. The rest of the image is drawn in underneath.

Of course, you can tweak this however you like - if you want to use a higher-resolution version for the zoomed-in image, you can just pass a different Media object into self.canvas_1.draw_image_part.

If you want to put multiple of these on a page, the Custom Components section of the reference docs will help you.

1 Like

This is awesome, thank you so much!

Love the wombat too.

Jim