Take Screenshot and Download with Blazor WebAssembly

-
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.


Comments

Post a Comment

Popular posts from this blog

Entity Framework Core (EF) with SQL Server LocalDB

-
Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored...
Read more

Progressive Web App (PWA) Manifest File in Blazor

-
Image
This article is going to explain what a manifest file is and how to use it in the PWA Blazor application. You can easily configure the manifest in your Blazor app. Let's see how to do it. What is a Manifest File? Manifest is a single JSON file that tells the browser what kind of application it is, What is the name of the application? Where is the application icon? What background color and etc. The manifest file name must be manifest.json While creating the Blazor application , it will automatically create the manifest.json file under wwwroot folder. The following is a default manifest.json code. { "name" : "SamplePWABlazorApp" , "short_name" : "SamplePWABlazorApp" , "start_url" : "./" , "display" : "standalone" , "background_color" : "#ffffff" , "theme_color" : "#03173d" , "icons" : [ { "src" : "icon-5...
Read more

A Step-by-Step Guide to Implementing Identity in ASP.NET Core MVC

-
Image
Are you ready to enhance your ASP.NET Core MVC project with the power of Identity? In this comprehensive guide, we'll walk you through the process of setting up and customizing the Identity system in your web application. By the end of this tutorial, you'll be able to implement secure user authentication and authorization for your ASP.NET Core project. Step 1: Create a New ASP.NET Core Web App Begin by opening Visual Studio and selecting "ASP.NET Core Web App (Model-View-Controller)" as your project template. Follow these steps: 1. Open Visual Studio and create a new project, selecting "ASP.NET Core Web App (Model-View-Controller)". 2. In the "Configure your project" window, enter the project name and choose the project's location. 3. In the "Additional Information" window, select the framework and choose "Individual Accounts" as the Authentication type. 4. Click "Create" to generate your project....
Read more