ASP.Net面板到圖像
[英]ASP.Net Panel to Image
問題描述
我有一個Panel控件，並且在面板內每個跨度都有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>
請讓我知道。
預先謝謝你
1 個解決方案
解決方案1
1 已采納 2018-06-12 16:11:49
這是Mudassar Ahmed Khan網站上的精彩教程，使用HTML5 Canvas， div和table元素以及Html2Canvas庫。
看看這個：
UPDATE
我將教程與您的要求結合在一起。 我還必須更新對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();
}
}
結果：
asp.net中面板的背景
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.