How do I rotate an image?

Bug Reports
1

Hi, I’m new to Anvil (and Python for that matter). I was looking at the image documentation and have not figured out how to rotate an image. I’ve taken most of the code below from the examples (https://anvil.works/docs/media/image-manipulation) and it does display the image on my screen and prints the width and height.

But nothing I have tried so far will rotate the image. Below I am just assigning it to a variable as in the example. That yields: [An internal error has occurred] . How do I rotate the image and refresh the image onscreen with the rotated image?

my_media = anvil.URLMedia("https://anvil.works/ide/img/banner-100.png")
self.image_1.source= my_media
width, height = anvil.image.get_dimensions(my_media)
print("The image is %s pixels wide and %s pixels high" % (width, height))

test_img = anvil.image.rotate(my_media, 30)

Thanks!

2

Hello and welcome,

I can also reproduce this. Here is a clone app for the Anvil devs:
https://anvil.works/build#clone:YAFEDIEGF533RO54=QUBZSWD7BIS33XFZNA3XK3XF

Hello @shaun, just letting you know that there may be a bug with image rotation. I can get the “internal error” to go away if I create a BlobMedia object with an image (with the content type ‘image/png’), but it doesn’t help as I can’t get the code to interpret any lines after the rotation command.

3

Looking at the browser console, I see this error :

Uncaught DOMException: Failed to execute ‘atob’ on ‘Window’: The string to be decoded is not correctly encoded.
at e (https://anvil.works/runtime/js/runner.bundle.js?buildTime=1569834730:187:4068)
at HTMLImageElement.c.onload (https://anvil.works/runtime/js/runner.bundle.js?buildTime=1569834730:188:2707)

2 Likes
4

Thanks to the three of you for the report and clear reproduction case. Moving to bug reports.

5

This is actually a bug in our documentation - it’s not possible to rotate a cross-origin image. Browsers don’t allow you to access the raw bytes of a third-party image from code, for security reasons. This is true in any application.

We’ve improved the error message and we will change the image rotation part of the documentation (since it currently indirectly implies that this is possible.)

1 Like
6

I ran into this as well. The man page Anvil Docs | Image Manipulation has the same issue.

icon = URLMedia('https://cdn.vectorstock.com/i/1000v/55/34/om-sign-vector-22855534.jpg')
w,h = anvil.image.get_dimensions(icon)
print(w,h)
small_icon = anvil.image.generate_thumbnail(icon, 16)

Yields:
RuntimeError: Cannot rotate image from untrusted cross-origin source.

7

Hello @dave2.

The code that you posted never calls the rotate method, and so shouldn’t produce the RuntimeError that you showed.

The documentation page that you linked to includes the following call-out:

image
image810×161 16.9 KB

As a workaround to this documented limitation, to create your rotated icon you can:

  1. download the image file locally,
  2. add it to your app’s assets,
  3. use the following code:
icon_file = "_/theme/om-sign-vector-22855534.jpg"
icon = URLMedia(icon_file)
rotated_icon = anvil.image.rotate(icon, 90)

The above technique comes from the documentation. However, if you’re always only going to use the rotated version of the icon, then it’d be better to perform that manipulation once outside Anvil and then upload the rotated version to your app’s assets for future access.

(Note: If, on the other hand, you’re going to need to rotate image files that are hosted at URLs that won’t be known until run-time, then you’ll probably want to save them to and load them from a Media field in a database row.)

2 Likes