ASP.Net 面板到图像答案

【问题标题】：ASP.Net Panel to ImageASP.Net 面板到图像
【发布时间】：2018-11-21 20:49:02
【问题描述】：

我有一个面板控件，并且在面板中我对每个跨度都有 sapn 控件我有一些彩色文本，我想保存为图像，这可能吗？

如果是怎么办？

我正在使用 asp.net 和 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>

请务必告诉我。

提前谢谢你

【问题讨论】：

How to convert a web page to an image? 的可能重复项。我认为这将是获得您想要的东西的最快方法。您将捕获浏览器看到的图像。
How to convert a web page to an image?的可能重复
asp:Panel 我想按按钮将面板中的数据保存为jpg格式
as:面板区保存数据jpg asp.net c#
按打印屏幕然后裁剪？？！说真的，你想让我们用你最后的 cmets 做什么？不要像机器人一样重复两次相同的要求，请查看 Phil 和 Rafal 发布的链接。另请参阅stackoverflow.com/questions/18581379/… ...您自己对此进行过任何研究吗？

标签： c# asp.net image panel

【解决方案1】：

这是 Mudassar Ahmed Khan 网站上使用 HTML5 Canvas、div 和 table 元素结合 Html2Canvas 库的精彩教程。

检查一下：

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

更新

我将本教程与您的要求相结合。我还必须更新对 javascript 文件（cdn）的引用：

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（代码隐藏）

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();
    }
}

结果：

【讨论】：