takeScreenshot
takeScreenshot action allows you to capture a screenshot of read-only widgets using its widgetId. The screenshot is saved to the gallery on mobile platforms or downloaded directly on the web, while also providing the image bytes for further use. It's an efficient solution for exporting visual content in high quality.
Properties
| Property | Type | Description |
|---|---|---|
| widgetId | string | The ID of the target widget to be captured as a screenshot. |
| onSuccess | action | Action to be excecuted on successful screenshot capture. |
| onError | action | Action to be excecuted on error during screenshot capture. |
Event Data
When the onSuccess action is executed, the following data is available under event.data:
- imageBytes: Provides bytes of the screenshot.
- size: Provides total size of image in bytes, e.g. if screenshot has size of 1KB then
sizewill return 1024. - dimensions: Provides dimentions of the image as
dimensions.widthanddimensions.height
When the onError action is executed, the following data is available under event.data:
- error: Error message describing the issue.
Example
View:
styles:
scrollableView: true
header:
title: "Action: takeScreenshot"
Column:
styles:
gap: 16
padding: 24
children:
- Column:
id: section1
styles:
gap: 16
children:
- Button:
label: Test Button 1
- Button:
label: Test Button 2
# Take Screenshot using `takeScreenshot` action
- Button:
label: Take Screenshot
onTap:
takeScreenshot:
widgetId: ${section1}
onSuccess:
executeCode:
body: |
console.log(event.data.imageBytes)
console.log(event.data.size)
console.log(event.data.dimensions)
# Take Screenshot using ensemble object in JavaScript `ensemble.takeScreenshot`
- Button:
label: Take Screenshot with JS
onTap:
executeCode:
body: |
ensemble.takeScreenshot({widgetId: section1})complete example here (opens in a new tab)