C#結(jié)合html2canvas切割圖片并導(dǎo)出到PDF
需求
html2canvas 是一個(gè) JavaScript 庫(kù),它可以把任意一個(gè)網(wǎng)頁(yè)中的元素(包括整個(gè)網(wǎng)頁(yè))繪制到指定的 canvas 中,適用于生成網(wǎng)截圖或?qū)⒅付ㄔ厝萜鲀?nèi)容保存為圖像等?,F(xiàn)有需求如下:
1、C#后臺(tái)輸出HTML片段內(nèi)容到客戶端;
2、引入 html2canvas 庫(kù),放置 canvas 對(duì)象,操作客戶端功能保存 canvas 內(nèi)容生成圖像 base64數(shù)據(jù);
3、回傳 base64 數(shù)據(jù),C# 生成圖像
4、C# 對(duì)于生成的長(zhǎng)圖進(jìn)行切割,生成多張圖片
5、將多張圖片導(dǎo)出生成到PDF文件。
開發(fā)運(yùn)行環(huán)境
操作系統(tǒng): Windows Server 2019 DataCenter
.net版本: .netFramework4.7.2
js庫(kù):html2canvas 1.3.2 版本庫(kù)
數(shù)據(jù)庫(kù):MS SQL SERVER 2016
開發(fā)工具:VS2019 C#
實(shí)現(xiàn)
生成HTML范例片斷
我們假設(shè)有存儲(chǔ)過(guò)程(CCDN_getTableDetail),通過(guò)傳遞表名參數(shù)(@tablename nvarchar(50)),可以獲取表的詳細(xì)信息,包括(表名、表說(shuō)明、字段序號(hào)、字段名、字段說(shuō)明、標(biāo)識(shí)、主鍵、類型、長(zhǎng)度、占用字節(jié)數(shù)、小數(shù)位數(shù)、允許空、默認(rèn)值),代碼如下:
CREATE PROCEDURE CCDN_getTableDetail
@tablename nvarchar(50)
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
SELECT
表名=convert(nvarchar(50),case when a.colorder=1 then d.name else '' end),
表說(shuō)明=convert(nvarchar(50),case when a.colorder=1 then isnull(f.value,'') else '' end),
字段序號(hào)=convert(nvarchar(50),a.colorder),
字段名=convert(nvarchar(50),a.name),
字段說(shuō)明=convert(nvarchar(50),isnull(g.[value],'')),
標(biāo)識(shí)=convert(nvarchar(50),case when COLUMNPROPERTY(a.id,a.name,'IsIdentity')=1 then '√'else '' end),
主鍵=convert(nvarchar(50),case when exists(SELECT 1 FROM sysobjects where xtype='PK' and name in (
SELECT name FROM sysindexes WHERE indid in(
SELECT indid FROM sysindexkeys WHERE id = a.id AND colid=a.colid
))) then '√' else '' end),
類型=convert(nvarchar(50),b.name),
長(zhǎng)度=convert(nvarchar(50),COLUMNPROPERTY(a.id,a.name,'PRECISION')),
占用字節(jié)數(shù)=convert(nvarchar(50),a.length),
小數(shù)位數(shù)=convert(nvarchar(50),isnull(COLUMNPROPERTY(a.id,a.name,'Scale'),0)),
允許空=convert(nvarchar(50),case when a.isnullable=1 then 'NULL'else 'NOT NULL' end),
默認(rèn)值=convert(nvarchar(50),isnull(e.text,''))
FROM syscolumns a
left join systypes b on a.xtype=b.xusertype
inner join sysobjects d on a.id=d.id and d.xtype='U' and d.name<>'dtproperties'
left join syscomments e on a.cdefault=e.id
left join sys.extended_properties g on a.id=g.major_id and a.colid=g.minor_id
left join sys.extended_properties f on d.id=f.major_id and f.minor_id =0
where d.name=@tablename
order by a.id,a.colorder
END運(yùn)行效果如下圖:

現(xiàn)我們通過(guò) DataSet 獲取數(shù)據(jù)集數(shù)據(jù),并綁定顯示在 DataGrid 控件(q_dbgrid)上。 如何獲取數(shù)據(jù)集信息可參考《C# 利用IDbDataAdapter / IDataReader 實(shí)現(xiàn)通用數(shù)據(jù)集獲取》。
綁定示例代碼如下:
object rv2 = GetDataSet(sql, paras,CommandType.StoredProcedure);
DataSet ds = (DataSet)rv2;
DataTable dt = ds.Tables[0];
q_dbgrid.AllowPaging = true;
q_dbgrid.PagerStyle.Visible = false;
q_dbgrid.PageSize = 1000;
q_dbgrid.DataSource = ds;
q_dbgrid.DataBind();
HTML元素轉(zhuǎn)BASE64
在頁(yè)面上放置 canvas 畫布控件(myCanvas)和臨時(shí)存放BASE64數(shù)據(jù)的 TextBox 控件(ds),首先需要引用 html2canvas js庫(kù),如下:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
客戶端示例代碼如下:
<script language="javascript" type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("myCanvas")
html2canvas(document.getElementById("q_dbgrid")).then(canvas => {
document.getElementById("myCanvas").appendChild(canvas); // 將生成的canvas添加到頁(yè)面上
var image = canvas.toDataURL("image/jpeg");
document.getElementById("ds").value = image;
});
}
</script>
通過(guò) html2canvas 方法生成 jpeg類型的圖像數(shù)據(jù)(canvas.toDataURL("image/jpeg"))并存儲(chǔ)在 ds 控件里。
BASE64轉(zhuǎn)圖片
Base64StringToImage方法說(shuō)明如下表:
| 序號(hào) | 參數(shù)名 | 類型 | 說(shuō)明 |
|---|---|---|---|
| 1 | strbase64 | string | base64數(shù)據(jù) |
| 2 | outputFilename | string | 輸出的圖像文件全路徑 |
實(shí)現(xiàn)代碼如下:
public bool Base64StringToImage(string strbase64, string outputFilename)
{
byte[] arr = Convert.FromBase64String(strbase64);
MemoryStream ms = new MemoryStream(arr);
System.Drawing.Image img = System.Drawing.Image.FromStream(ms);
img.Save(outputFilename);
img.Dispose();
if (File.Exists(outputFilename))
{
return true;
}
return false;
}
切割長(zhǎng)圖片
為保證較好的顯示效果,可能需要對(duì)長(zhǎng)圖片進(jìn)行切割,生成多個(gè)圖像文件,并存到指定的目錄里,以備后續(xù)導(dǎo)出生成PDF文件使用。示例代碼如下:
string outjpgpath = "D:\\testPDF\\";
string filename="D:\\test.jpg";
string base64Data = ds.Text.Trim().Replace("data:image/jpeg;base64,", "");
Base64StringToImage(base64Data, filename);
System.Drawing.Bitmap sbitmap = new System.Drawing.Bitmap(filename);
int out_width = sbitmap.Width;
int ref_height = 1000; int com_height = sbitmap.Height;
int hCount =sbitmap.Height<ref_height?1:sbitmap.Height % ref_height==0?sbitmap.Height/ref_height:sbitmap.Height/ref_height+1;
int out_top = 0;
int out_height = ref_height;
for (int i = 1; i <= hCount; i++)
{
if (i == 1) { out_top = 0; } else { out_top = ref_height * (i - 1) + 1; }
out_height = com_height < ref_height ? System.Math.Abs(com_height)-1 : ref_height;
com_height -= ref_height;
System.Drawing.Bitmap dbitmap = sbitmap.Clone(new System.Drawing.RectangleF(0, out_top, sbitmap.Width, out_height), System.Drawing.Imaging.PixelFormat.Format24bppRgb);
string f = "test" + ("0000" + i.ToString()).PadLeft(4) + ".jpg";
dbitmap.Save(outjpgpath + f);
dbitmap.Dispose();
}
sbitmap.Dispose();outjpgpath為輸出的多圖片目錄,filename 為生成的長(zhǎng)圖的地址。
ref_height為自定義的切割高度,根據(jù)指定切割高底生成若干“子”圖片。
生成PDF文件
通過(guò)讀取目錄中的多個(gè)圖像文件生成PDF,可參考《C# 將批量圖片轉(zhuǎn)為PDF文件》,這里不再贅述。
小結(jié)
切割圖片中的 ref_height,我們可以根據(jù)自定義的要求進(jìn)行設(shè)定,如某些標(biāo)準(zhǔn)的頁(yè)面尺寸像素值。另外,一些異常情況也需要進(jìn)行判斷,圖片的生成質(zhì)量也可以進(jìn)行調(diào)整 ,這些我們都要根據(jù)實(shí)際的應(yīng)用進(jìn)行調(diào)整。
另外,還可以通過(guò)API的方式,將網(wǎng)頁(yè)內(nèi)容保存為圖片,循環(huán)生成對(duì)應(yīng)的圖片,以解決長(zhǎng)圖片切割的問(wèn)題,可參考《C# 實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容保存為圖片并生成壓縮包》。
以上就是C#結(jié)合html2canvas切割圖片并導(dǎo)出到PDF的詳細(xì)內(nèi)容,更多關(guān)于C#切割圖片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
C#通過(guò)子窗體刷新父窗體的實(shí)現(xiàn)方法
在一些軟件,比如,進(jìn)銷存管理系統(tǒng)中添加銷售單信息時(shí),每個(gè)銷售單都可能對(duì)應(yīng)多種商品,而且在向銷售單中添加商品時(shí),一般都是在新彈出的窗體中選擇商品,這時(shí)就涉及通過(guò)子窗體刷新父窗體的問(wèn)題,本文給大家介紹了C#通過(guò)子窗體刷新父窗體的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-04-04
C#創(chuàng)建Windows服務(wù)的實(shí)現(xiàn)方法
這篇文章主要介紹了C#創(chuàng)建Windows服務(wù)的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
C#基礎(chǔ)教程之類class與結(jié)構(gòu)struct的區(qū)別
struct是值類型,創(chuàng)建一個(gè)struct類型的實(shí)例被分配在棧上,class是引用類型,創(chuàng)建一個(gè)class類型實(shí)例被分配在托管堆上,下面這篇文章主要給大家介紹了關(guān)于C#基礎(chǔ)教程之類class與結(jié)構(gòu)struct區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-11-11
C#基于TCP實(shí)現(xiàn)簡(jiǎn)單游戲客戶端的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于C#基于TCP實(shí)現(xiàn)簡(jiǎn)單游戲客戶端的相關(guān)資料,通過(guò)本文介紹的方法可以直接實(shí)現(xiàn)游戲客戶端,是個(gè)非常適合學(xué)習(xí)的實(shí)例需要的朋友可以參考下2021-11-11

