Take Screenshot and Download with Blazor WebAssembly

This blog will show you how to take a screenshot with Blazor WebAssembly. There is currently no way to take a screenshot in Blazor. So, in this blog, I'll use the Javascript library html2canvas to capture and download the screenshot.

The code below is an index.razor code. In the source code. To use Javascript functions, IJSRuntime is injected. To collect the message, I've added a textbox. This message will be captured in the screenshot. Two new buttons have been added. The first is to take a screenshot, and the second is to download the screenshot. Two methods for taking and downloading screenshots have been added to the @code area. The Javascript methods Takeshot and DownloadImg do not return any values, So I use the InvokeVoidAsync method to call them.

index.razor

@page "/"

@inject IJSRuntime jsRuntime

 

<h3>Take Screenshot with Blazor WebAssembly</h3>

 

<div id="screenshotContainer" style="width: 50%;background-color: #0d6efd; color: white;">

    <h1>@message</h1>

</div>

<br />

<input type="text" @bind="message" @bind:event="oninput" />

<br />

<br />

<h4>Screenshot:</h4>

<div id="output" style="width: 50%"></div>

 

<button type="button" class="btn btn-info" @onclick="Take">Take</button>

<button type="button" class="btn btn-info" @onclick="Download">Download</button>

 

@code {

    private string message = "";

 

    public async Task Take()

    {

        await jsRuntime.InvokeVoidAsync("Takeshot");

    }

 

    public async Task Download()

    {

        await jsRuntime.InvokeVoidAsync("DownloadImg");

    }

}

The following code snippet is an example of Javascript code. The methods Takeshot() and DownloadImg() are defined here.

SampleJavaScript.js

 Takeshot() {

    let div =

        document.getElementById('screenshotContainer');

 

    html2canvas(div).then(

         (canvas) {

            document

                .getElementById('output')

                .appendChild(canvas);

        });

}

 

 DownloadImg() {

    html2canvas(document.querySelector("#output")).then(canvas => {

        saveAs(canvas.toDataURL(), 'screenshot.png');

    });

}

 

 saveAs(uri, filename) {

    var link = document.createElement('a');

    if (typeof link.download === 'string') {

        link.href = uri;

        link.download = filename;

        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);

    } else {

        window.open(uri);

    }

}

The code for the index.html file is shown below. Inside the <body> tag, I've added the html2canvas.min.js cdn and SampleJavaScript.js script tags. As a result, the html2canvas javascript files and SampleJavaScript.js will be loaded.

index.html

<!DOCTYPE html>

<html lang="en">

<body>

    <div id="app">Loading...</div>

    ...

    ...

    ...

    <script src="_framework/blazor.webassembly.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>    

    <script src="Scripts/SampleJavaScript.js"></script>

</body>

 

</html>

The output of the above code is shown below. When the user clicks the Take button, the message is captured, and when the user clicks the Download button, the image is downloaded.

I hope this helps you. Keep coding.