Create an image which the user can right-click and download

Anvil Q&A
1

I want to create an image that the user can right-click and download.

In the Anvil editor, I am uploading a .PNG image to a form.
When the form is displayed in the user’s browser, I want the user to be able to right-click and choose
“save image as” and save it on their local computer.

However, when I try to right-click an uploaded image I do not get the normal menu, which includes “save image as” - it seems to think it is html and offers “Save as” (saving as an html file) - not what I want.

When uploading in the editor is seems to save it as: “data:image/png;base64,iVBORw0K…”
Is this why the user cannot download it as a .PNG?

I can do this easily in a simple HTML page with an <IMG tag.
How can I achieve what I want to do in Anvil ?

2

The how is another story, but the what you want to end up with is probably a media object containing your image data.

The Media Object can both be used by the Image Component to display the image, and the Media Object will also have a URL property, that can be assigned to a link and the link can encompass the image component that is displaying the image, showing the picture and making it clickable for download at the same time.

You could even have the links on-click event set to execute a
anvil.media.download(my_media_object)
command, without using any URL properties.

3

ianbuywise - thank-you for your response. I did investigate “anvil.URLMedia” - it looks promising but I could not get to work for me - when I have more time I will play with it some more.

However, in the meantime, I found a solution. When I add an image component in the editor and set the “display mode” to “original_size”, then upload the file, when I run the page, I can right-click and download the image.

If the “display mode” is set to “shrink_to_fit” or “zoom_to_fill” - you can no longer right-click and get the appropriate download as image menu option. So set “display mode” to “original_size” is the solution.

However, I came across one other annoying issue. The image I want the user to download is an 800 x 800 pixel .PNG file. When downloaded, via right-click and “save image as” it is saved as a 640 x 640 .PNG image. Images with dimensions of 640 x 640 and below are not altered in this fashion. I cannot find anything in the documentation which covers this restriction.

4

If you want users to download an image, asking them to download it themselves is usually not a good idea because it might be scaled down for the device. And the reason why this does not work with most of the display modes is that Anvil’s image component does not create an <img> tag but instead set the CSS property for the background image.

As for your case, it is quite easy to download media files in Anvil. Running this code will likely work in most cases

download(self.my_image.source) #Where my_image is your image component
5

divyeshlakhotia - thank-you for your input on this matter.
I added a button and in the click method, I called the “download(self.my_image.source)” method as you suggested.
This is preferable to asking the user to right-click the image.

However, it does download the file OK, but as 640 x 640 pixels, whereas the original image I uploaded using the Anvil editor, was 800 x 800 pixels - it seems that Anvil is doing something to the image, perhaps on the upload?

6

Oh, I see. Yeah, it indeed does. And my advice is that never upload images directly to Anvil. It increases the loading time of your apps and Anvil also compresses it. You should upload your images in assets or data tables.

7

I uploaded my 800 x 800 pixel image to Assets, and used the button to print out the dimensions before downloading and they still showed 800 x 800, and inspecting the downloaded image, it was indeed 800 x 800. Excellent - thanks for your help.
Here is the code for anyone else trying this (remember to add "import anvil.image " to the top of your page):

  def button_1_click(self, **event_args):
       image_media = URLMedia("./_/theme/image_800x800.png")
       width, height = anvil.image.get_dimensions(image_media)
       print('width =', width, 'height =', height)
       download(image_media)
3 Likes
8

Hmm, I wonder if that’s either a bug that it shrinks it down above 640X640 or if its a deliberate design decision for performance and/or storage reasons?

9

Does this help?

1 Like
10

It is a good thing that Anvil compresses the image. Because images directly uploaded to Anvil are added to the source code of your app which causes every image to load during the initial loading. So if the images are not compressed, you will soon end up with a very slow-loading website.

2 Likes