Overview

The Webpage Snapshot Capture component allows users to take snapshots of the current web page using JavaScript. It provides an easy-to-use OutSystems block that returns either an image of the snapshot or an error event in case of issues.

This component is useful for dynamically capturing web pages, with options to ignore certain elements and configure timeouts to prevent performance issues on large pages.

Features

✅ Capture a snapshot of the current web page.
✅ Receive either the snapshot image or an error event.
✅ Ignore specific elements from the capture using CSS selectors.
✅ Set a timeout to abort the capture if it takes too long.
✅ Enable multiple instances of the component with the new CallBackFunction object.

Component Structure

UI Block: CaptureWebpageSnapshotCallback

This block is responsible for handling the snapshot capture process and returning the result.

Events

• OnReady: Returns the CallBackFunction (object), which must be passed to the TriggerWebpageSnapshotCapture client action to enable multiple component instances.
• SnapshotError: Triggered when an error occurs during the snapshot process.
  • ErrorMessage: Returns a string containing the error details.
• SnapshotImage: Triggered when the snapshot is successfully captured.
  • ImageBinary: Returns the binary data of the image.
  • ImageExtension: Returns the file extension of the image (e.g., .png).

Client Action: TriggerWebpageSnapshotCapture

This action is used to initiate the snapshot capture process.

Parameters

• CallBackFunction (required): The function object returned by OnReady, ensuring correct execution in multiple instances.
• IgnoreElements (optional): A comma-separated string of CSS selectors. Any elements matching these selectors will be temporarily hidden before capturing the snapshot.
• Timeout (optional, default = 5 seconds): Defines the maximum time allowed for capturing the snapshot. If the process takes longer, it will be aborted.
• ImageFormat (optional, default: 0): An integer value to define the image output format.
  • 1 = .png
  • 0 or any other value = .jpeg

Usage

1️⃣ Add the CaptureWebpageSnapshotCallback block to the page where you want to take snapshots.
2️⃣ Use the OnReady event to retrieve the CallBackFunction object.
3️⃣ Call TriggerWebpageSnapshotCapture, passing the CallBackFunction and any optional parameters. You may consider to show a capture button, only when the component has initialized and the CallBackFunction <> NullObject().
4️⃣ Handle the events:

• If the snapshot is successful, use SnapshotImage to get the image data.
• If an error occurs, use SnapshotError to retrieve the error message.
  5️⃣ (Optional) Use IgnoreElements to exclude elements such as banners, modals, or advertisements from the capture.

Notes

🔹 The IgnoreElements parameter temporarily hides specified elements during the snapshot process, restoring them immediately afterward.
🔹 Large web pages or complex animations may cause longer snapshot times; consider adjusting the Timeout value accordingly.
🔹 The CallBackFunction parameter is required to properly manage multiple instances of the component.