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:
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!
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.
First, the Canvas is cleared.
Then a square is drawn at the magnified size.
This is masked off into a circle
The border is drawn around the edge of the circle
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.
I am trying to use this approach with images that I have stored on the data table, however I’m getting issues with the dimensions because the returned image is a lazyMedia object. How can I use this approach whilst also working with images that are stored on the Anvil datatable?
(Note - my image is relatively large and I don’t want it to block the page load)
