Html2Canvas
Namespace: Wisej.Web.Ext.Html2Canvas
Assembly: Wisej.Web.Ext.Html2Canvas (4.1.0.0)
Implementation of the html2canvas (https://html2canvas.hertzen.com/) library. It's a singleton instance that can take a screenshot of a specific control or the entire browser and send the image back to the server.
- C#
- VB.NET
public class Html2Canvas : Component
Public Class Html2Canvas
Inherits Component
Use the static methods directly, the session instance is created automatically:
Html2Canvas.Screenshot(this, (image) => {
image.Save(@"\images\screen.png");
});
// or using asynchronous code:
var image = await Html2Canvas.ScreenshotAsync(this.panel1);
image.Save(@"\images\screen.png");
Methods
OnWebRender(config)
Renders the client component.
| Parameter | Type | Description |
|---|---|---|
| config | Object | Dynamic configuration object. |
Screenshot(callback)
Takes a screenshot of the browser.
| Parameter | Type | Description |
|---|---|---|
| callback | Action<Image> | Callback method that receives the Image object, or null if the image couldn't be decoded. |
The screenshot is rendered asynchronously in the browser by the html2canvas library (https://html2canvas.hertzen.com/), which re-creates the image from the DOM and the CSS styles; it's not an actual screen capture, so some content (i.e. cross-origin images or iframes) may not be rendered. The image is returned as a PNG Bitmap.
The method returns immediately and callback is invoked when the image is received from the browser. If the client reports an error, the exception is thrown when the response is processed, not by this method.
Throws:
- ArgumentNullException If any of the arguments is null.
Example:
Saving a screenshot of the whole browser page:
private void buttonCapture_Click(object sender, EventArgs e)
{
Html2Canvas.Screenshot(image =>
{
image?.Save(Path.Combine(Application.StartupPath, "Screenshots", "page.png"));
});
}
Screenshot(options, callback)
Takes a screenshot of the browser using the specified options .
| Parameter | Type | Description |
|---|---|---|
| options | Html2CanvasOptions | The Html2CanvasOptions to pass to the html2canvas call. |
| callback | Action<Image> | Callback method that receives the Image object, or null if the image couldn't be decoded. |
The screenshot is rendered asynchronously in the browser by the html2canvas library (https://html2canvas.hertzen.com/), which re-creates the image from the DOM and the CSS styles; it's not an actual screen capture, so some content (i.e. cross-origin images or iframes) may not be rendered. The image is returned as a PNG Bitmap.
The method returns immediately and callback is invoked when the image is received from the browser. If the client reports an error, the exception is thrown when the response is processed, not by this method.
Throws:
- ArgumentNullException If any of the arguments is null.
Example:
Taking a screenshot with a white background at the original size:
var options = new Html2CanvasOptions
{
BackgroundColor = Color.White,
Scale = 1
};
Html2Canvas.Screenshot(options, image =>
{
this.pictureBox1.Image = image;
});
Screenshot(target, callback)
Takes a screenshot of the specified Control.
| Parameter | Type | Description |
|---|---|---|
| target | Control | The Control to render to an Image. |
| callback | Action<Image> | Callback method that receives the Image object, or null if the image couldn't be decoded. |
The screenshot is rendered asynchronously in the browser by the html2canvas library (https://html2canvas.hertzen.com/), which re-creates the image from the DOM and the CSS styles; it's not an actual screen capture, so some content (i.e. cross-origin images or iframes) may not be rendered. The image is returned as a PNG Bitmap.
The method returns immediately and callback is invoked when the image is received from the browser. If the client reports an error, the exception is thrown when the response is processed, not by this method.
The target control must be created and visible on the client.
Throws:
- ArgumentNullException If any of the arguments is null.
Example:
Displaying a snapshot of a panel in a picture box:
private void buttonCapture_Click(object sender, EventArgs e)
{
Html2Canvas.Screenshot(this.panelChart, image =>
{
this.pictureBoxPreview.Image = image;
});
}
Screenshot(target, options, callback)
Takes a screenshot of the specified Control using the specified options .
| Parameter | Type | Description |
|---|---|---|
| target | Control | The Control to render to an Image. |
| options | Html2CanvasOptions | The Html2CanvasOptions to pass to the html2canvas call. |
| callback | Action<Image> | Callback method that receives the Image object, or null if the image couldn't be decoded. |
The screenshot is rendered asynchronously in the browser by the html2canvas library (https://html2canvas.hertzen.com/), which re-creates the image from the DOM and the CSS styles; it's not an actual screen capture, so some content (i.e. cross-origin images or iframes) may not be rendered. The image is returned as a PNG Bitmap.
The method returns immediately and callback is invoked when the image is received from the browser. If the client reports an error, the exception is thrown when the response is processed, not by this method.
The target control must be created and visible on the client.
Throws:
- ArgumentNullException If any of the arguments is null.
Example:
Capturing a form at double resolution:
Html2Canvas.Screenshot(this, new Html2CanvasOptions { BackgroundColor = Color.White, Scale = 2 }, image =>
{
image?.Save(Path.Combine(Application.StartupPath, "Screenshots", "form.png"));
});
ScreenshotAsync(options)
Asynchronously returns an Image that represents a screenshot of the browser.
| Parameter | Type | Description |
|---|---|---|
options  | Html2CanvasOptions | The Html2CanvasOptions to pass to the html2canvas call, or null to use the defaults. |
Returns: Task<Image>. An awaitable Task that contains the screenshot, or null if the image couldn't be decoded.
The screenshot is rendered in the browser by the html2canvas library (https://html2canvas.hertzen.com/), which re-creates the image from the DOM and the CSS styles; it's not an actual screen capture, so some content (i.e. cross-origin images or iframes) may not be rendered. The image is returned as a PNG Bitmap. If the client reports an error, the returned task is faulted with the exception.
Example:
Attaching a screenshot of the page to a support request:
private async void buttonReport_Click(object sender, EventArgs e)
{
var image = await Html2Canvas.ScreenshotAsync();
if (image != null)
SendSupportRequest(this.textBoxDescription.Text, image);
}
ScreenshotAsync(target, options)
Asynchronously returns an Image that represents a screenshot of the specified Control as it appears on the browser.
| Parameter | Type | Description |
|---|---|---|
| target | Control | The Control to render to an Image. |
| options | Html2CanvasOptions | The Html2CanvasOptions to pass to the html2canvas call, or null to use the defaults. |
Returns: Task<Image>. An awaitable Task that contains the screenshot, or null if the image couldn't be decoded.
The screenshot is rendered in the browser by the html2canvas library (https://html2canvas.hertzen.com/), which re-creates the image from the DOM and the CSS styles; it's not an actual screen capture, so some content (i.e. cross-origin images or iframes) may not be rendered. The image is returned as a PNG Bitmap. If the client reports an error, the returned task is faulted with the exception. The target control must be created and visible on the client.
Throws:
- ArgumentNullException target is null.
Example:
Capturing a panel with await:
private async void buttonCapture_Click(object sender, EventArgs e)
{
var image = await Html2Canvas.ScreenshotAsync(this.panelDashboard, new Html2CanvasOptions { BackgroundColor = Color.White, Scale = 1 });
this.pictureBox1.Image = image;
}
Implements
| Name | Description |
|---|---|
| IUserData | |
| IWisejComponent | |
| IWisejSerializable |