html2canvas
Reactive icon

html2canvas

Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded
 on 22 Feb
 by 
5.0
 (1 rating)
html2canvas

html2canvas

Documentation
1.0.1

HTML2Canvas

Overview

The HTML2Canvas Screenshot Component enables capturing a specific UI container and generating an image from it using the html2canvas library.

It supports direct image download as well as Base64 and Binary image generation for storage or integration purposes. The component is compatible with Reactive Web and Mobile applications.


Included Client Actions

Html2CanvasImageDownload

Captures a specified container and automatically downloads it as an image file.

Input Parameters

  • ContainerID (Text) – ID of the HTML element to capture

  • ImageType (Text) – Image format (e.g., "image/png", "image/jpeg")

  • FileName (Text) – Output file name including extension

This action generates a high-resolution image and triggers the browser download automatically.



Html2CanvasImageAndConvertBinary

Captures a specified container and returns the generated image in Base64 and Binary formats.

Parameters

  • ContainerID (Text – Input)

  • Base64Image (Text – Output)

  • BinaryImage (Binary Data – Output)

This action is suitable for database storage, API integration, file upload, or email attachments.


Technical Details

The component uses html2canvas with the following configuration:

  • High-resolution rendering (scale: 2)

  • Explicit white background to prevent rendering artifacts

  • CORS enabled for external resources compatibility


Limitations

Rendering accuracy depends on html2canvas capabilities. Some advanced CSS effects (e.g., complex shadows or filters) may not be reproduced exactly as displayed in the browser.


1.0.0

Follow Step: 

1. You must add the Html2CanvasImageDownload weblock to your screen, so that the necessary library is imported:

Like this: 


2. If you use the action Html2CanvasImageDownload

the download is done automatically, it is not necessary to use the outsystems download widget


Input Parameters:

ContainerID: the div you want to print

ImageType: PNG or JPG

FileName: name of the file that will appear in the download



3. If you use the action Html2CanvasImageAndConvertBinary  

Input Parameters: 

ContainerID: the div you want to print


Output Parameters:

Base64Image

BinaryImage