ASP.Net Panel to Image

Question

I have a control of Panel and within panel I have sapn control on each span I have some colorfull text, all I want to save as image, is it possible?

If yes how?

I am using asp.net and c#.

<asp:Panel ID="wordcloud2" runat="server">

<span data-weight="43">Nike</span>
<span data-weight="41">Reebok</span>
<span data-weight="60">Adidas</span>
<span data-weight="39">Roush</span>
<span data-weight="17">Bata</span>
<span data-weight="35">Lunar's</span>
<span data-weight="33">VKC</span>
<span data-weight="31">Lee cooper</span>
</asp:Panel>

Please do let me know.

Thanking you in advance

Possible duplicate of [How to convert a web page to an image?](https://stackoverflow.com/questions/3012728/how-to-convert-a-web-page-to-an-image). I think this will be the quickest way to get something like what you want. You'll be capturing what the browser sees into an image. — Phil Cooper, Jun 12 '18 at 12:43
Possible duplicate of [How to convert a web page to an image?](https://stackoverflow.com/questions/3012728/how-to-convert-a-web-page-to-an-image) — Rafal, Jun 12 '18 at 12:49
asp:Panel I want to save the data in the panel as jpg by pressing the button — Hanbey, Jun 12 '18 at 12:50
press Print Screen and then crop??! Seriously though, what do you want us to do with your last comments? Instead of just repeating the same requirement twice more like a robot, please take a look at the link posted by Phil and Rafal. See also https://stackoverflow.com/questions/18581379/how-to-save-the-contents-of-a-div-as-a-image ...have you done _any_ research into this yourself? — ADyson, Jun 12 '18 at 14:14
Stack Overflow Isn’t Very Welcoming. It’s Time for That to Change. https://stackoverflow.blog/2018/04/26/stack-overflow-isnt-very-welcoming-its-time-for-that-to-change/ — Máster, Jun 12 '18 at 16:03
Hanbey's requirement is clear. Wants to save an `asp:Panel`'s content into a `jpg` file. — Máster, Jun 12 '18 at 16:06
@SantiagoTrejo Possibly it isn't in some cases, but then again I don't see why we should welcome questions which are basically repeats of earlier questions and also blogs on the internet covering the same topic, and where OP has clearly done very little to help themselves. We're here to assist people with specific problems, not to complete their R&D for them.If someone isn't willing to put some time and effort into a) doing some basic research and effort into their problem, b) express their problem clearly, c) reply coherently to suggestions, why should others spend their _free_ time on it? — ADyson, Jun 12 '18 at 16:22

score 1 · Accepted Answer · edited Jul 24 '18 at 04:20

Here's a great tutorial from Mudassar Ahmed Khan's website using HTML5 Canvas, div and table elements combined with Html2Canvas library.

Check it out:

https://www.aspsnippets.com/Articles/Convert-Export-HTML-DIV-or-Table-to-Image-using-HTML-Canvas-in-ASPNet-using-C-and-VBNet.aspx

UPDATE

I combined the tutorial with your requirement. I had to also update the references to the javascript files (cdn's):

PanelToImage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PanelToImage.aspx.cs" Inherits="PanelToImage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
    <script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.8/html2canvas.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        function ConvertToImage(btnExport) {
            html2canvas($("#dvTable")[0]).then(function (canvas) {
                var base64 = canvas.toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnExport.name, "");
            });
            return false;
        }
    </script>

    <form id="form1" runat="server">
        <div id="dvTable" style="width: 340px; background-color: White; padding: 5px">
            <asp:Panel ID="wordcloud2" runat="server">
                <span data-weight="43">Nike</span>
                <span data-weight="41">Reebok</span>
                <span data-weight="60">Adidas</span>
                <span data-weight="39">Roush</span>
                <span data-weight="17">Bata</span>
                <span data-weight="35">Lunar's</span>
                <span data-weight="33">VKC</span>
                <span data-weight="31">Lee cooper</span>
            </asp:Panel> 
        </div>
        <br />
        <asp:HiddenField ID="hfImageData" runat="server" />
        <asp:Button ID="btnExport" Text="Export to Image" runat="server" UseSubmitBehavior="false" OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" />
    </form>        
</body>
</html>

PanelToImage.cs (code behind)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class PanelToImage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void ExportToImage(object sender, EventArgs e)
    {
        string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
        byte[] bytes = Convert.FromBase64String(base64);

        Response.Clear();
        Response.ContentType = "image/png";
        Response.AddHeader("Content-Disposition", "attachment; filename=HTML.png");
        Response.Buffer = true;
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.BinaryWrite(bytes);
        Response.End();
    }
}

Results:

ASP.Net Panel to Image

1 Answers1