Editing images in the user interface

Anvil Q&A
#1

Hello, I would like to know if it is possible, in some way, to display an image in the anvil user interface in such a way that the user could edit it like, for example, painting / highlighting some of the pixels with a digital marker. I would really appreciate some feedback on that!

#2

I haven’t tried building a mark up tool as yet but the Canvas component is probably a good start.

2 Likes
#3

You might want to have a look at Image Zoom on mouseover - #2

2 Likes
#4

Thank you for the info! This definetely seems to be in the right direction.

1 Like
#5

Thank you Owen, I looked into it and it is very useful information. I think that this would be a good start for what I am currently trying to do. However, I get the error ‘ImageException: Error loading image’ when trying to access the link fot the wombat’s app: https://magnified-wombat.anvil.app/ . Is everyone having the same problem? I would love to see the code for that but I am currently unable to access it.

#6

I see the same error. The post is 3 three years old and the image shown in the demo no longer exists. But you can clone the app and replace that image. This is the line you need to take a look at

self.img = URLMedia("https://nnimgt-a.akamaihd.net/transform/v1/crop/frm/silverstone-feed-data/1fb1425d-3c84-495d-80dd-515004c5ed99.jpg/r0_0_800_600_w1200_h678_fmax.jpg")
2 Likes
#7

OK I see. But how could I clone the app? To be honest, the main thing I am interested on is accessing the code for that app, so I can use it as a start point. Do you know how can I get the code?

#8

Here’s the clone link
https://anvil.works/build#clone:4EZHJ3E3LVREBPUG=Q75ZMLSLG5K6LY6KRJ54YIJZ

It was also present in the main post Image Zoom on mouseover - #2

1 Like
#9

Thanks a lot! This was helpful :slight_smile:

1 Like