Snapshot of canvas

[Gerhard]

Thank you Stefano,

I was wondering if it is possible to take a snapshot with canvas from a content panel (labels, buttons …)? Is there a way for capturing an image from a Form (content_panel)?

self.canvas = Canvas(height=400, spacing_above='none', spacing_below='none') 
self.content_panel.add_component(self.canvas, width='100%')
img = self.canvas.get_image()
self.image_1.source = img

[stefano.menci]

The Anvillic way
would be to have the content panel in its own blank form, and use it as a custom control in the main form or as a stand alone form when rendering to PDF.

The custom control should be able to build itself. That is instead of having the main form telling the canvas and the labels what to do, the form should give the custom control all the info it needs, then the __init__ or __show__ event of the custom control should do the job.

If there are input elements like buttons, then the custom control should talk back to its owner via events.

I have used this way. The PDF renderer on the server side can be slow, but it works.

The Pythonic way
would be to use javascript libraries like html2canvas.

I think this would happen on the client side, I don’t know think it would work on the server side. But you should be able to send the image back to the server if you need to.

I have never used this way.

[Gerhard]

Ciao Stefano,

thank you for the explanation: I guess I will investigate the Anvillic way!

Pythonic way if I can get a snapshot on an not in the browser visible page, it would work.

Ciao
Gerhard

[Gerhard]

Great Job!
I was wondering if it is possible to take a snapshot with canvas from a content panel (labels, buttons …)? Is there a way for capturing an image from a Form (content_panel)?

self.canvas = Canvas(height=400, spacing_above='none', spacing_below='none') 
self.content_panel.add_component(self.canvas, width='100%')
img = self.canvas.get_image()
self.image_1.source = img

[divyeshlakhotia]

I am not exactly sure what you mean but if you are talking about capturing images of content panels (along with all the components in them), you might have a look at the Snapshot library

Cropper+Snapshot

Here are the Custom Components I used in the App above/ The first component, ‘Cropper’ allows cropping of images and returning the result To crop an image, add the custom component to your app and call it self.cropper_1.crop() #This works by mentioning the aspect ratio You can also do freecropping by using self.cropper_1.freecrop() #free cropping of image without any ratio Then you can call the getresult or downloadresult method The second component ‘Snapshot’ returns a screenshot of a…

[Gerhard]

@divyeshlakhotia

Thank you for sharing! Awsome tool!
E got the follwong error message:

ExternalError: [object Event]

• at Snapshot, line 18
• called from Snapshot, line 23
• called from Snapshot_Example, line 20

Question:
can I take a snapshots from a not in the browser loaded Form (Form loaded but not in the browser visible)?

Thanks
Gerhard

[duncan_richards12]

Probably not because unlike anvil, that other library is almost certainly dealing with the active current DOM.

[Gerhard]

Tank you for your replay!

[campopianoa]

Admin note: Merged related posts into one place and under Q&A.

[Gerhard]

Ciao Stefano,

pls. find attached a demo file able to create a snaphot from a form as svg by downloading the file in the browser.

I am struggeling to save the svg as image to the table or as image in a new form e.g. canvas … in order to create a PDF.

Login

Any idea ( document.createElement(“IMG”)) ?