广告位联系
返回顶部
分享到

C#结合html2canvas切割图片并导出到PDF

C#教程 来源:互联网 作者:佚名 发布时间:2025-02-06 09:02:57 人浏览
摘要

需求 html2canvas 是一个 JavaScript 库,它可以把任意一个网页中的元素(包括整个网页)绘制到指定的 canvas 中,适用于生成网截图或将指定元素容器内容保存为图像等。现有需求如下: 1、C#后台

需求

html2canvas 是一个 JavaScript 库,它可以把任意一个网页中的元素(包括整个网页)绘制到指定的 canvas 中,适用于生成网截图或将指定元素容器内容保存为图像等。现有需求如下:

1、C#后台输出HTML片段内容到客户端;

2、引入 html2canvas 库,放置 canvas 对象,操作客户端功能保存 canvas 内容生成图像 base64数据;

3、回传 base64 数据,C# 生成图像

4、C# 对于生成的长图进行切割,生成多张图片

5、将多张图片导出生成到PDF文件。

开发运行环境

操作系统: Windows Server 2019 DataCenter

.net版本: .netFramework4.7.2 

js库:html2canvas  1.3.2  版本库

数据库:MS SQL SERVER 2016

开发工具:VS2019  C#

实现

生成HTML范例片断

我们假设有存储过程(CCDN_getTableDetail),通过传递表名参数(@tablename nvarchar(50)),可以获取表的详细信息,包括(表名、表说明、字段序号、字段名、字段说明、标识、主键、类型、长度、占用字节数、小数位数、允许空、默认值),代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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),

    表说明=convert(nvarchar(50),case when a.colorder=1 then isnull(f.value,'') else '' end),

    字段序号=convert(nvarchar(50),a.colorder),

    字段名=convert(nvarchar(50),a.name),

    字段说明=convert(nvarchar(50),isnull(g.[value],'')),

    标识=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),

    长度=convert(nvarchar(50),COLUMNPROPERTY(a.id,a.name,'PRECISION')),

    占用字节数=convert(nvarchar(50),a.length),

    小数位数=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),

    默认值=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

运行效果如下图:

现我们通过 DataSet 获取数据集数据,并绑定显示在 DataGrid 控件(q_dbgrid)上。 如何获取数据集信息可参考《C# 利用IDbDataAdapter / IDataReader 实现通用数据集获取》。

绑定示例代码如下:

1

2

3

4

5

6

7

8

9

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元素转BASE64

在页面上放置 canvas 画布控件(myCanvas)和临时存放BASE64数据的 TextBox 控件(ds),首先需要引用 html2canvas js库,如下:

1

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

客户端示例代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<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添加到页面上

    var image = canvas.toDataURL("image/jpeg");

    document.getElementById("ds").value = image;

  

  });

  

}

</script>

通过 html2canvas 方法生成 jpeg类型的图像数据(canvas.toDataURL("image/jpeg"))并存储在 ds 控件里。

BASE64转图片

Base64StringToImage方法说明如下表:

序号 参数名 类型 说明
1 strbase64 string base64数据
2 outputFilename string 输出的图像文件全路径

实现代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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;

}

切割长图片

为保证较好的显示效果,可能需要对长图片进行切割,生成多个图像文件,并存到指定的目录里,以备后续导出生成PDF文件使用。示例代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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 为生成的长图的地址。

ref_height为自定义的切割高度,根据指定切割高底生成若干“子”图片。

生成PDF文件

通过读取目录中的多个图像文件生成PDF,可参考《C# 将批量图片转为PDF文件》,这里不再赘述。

小结

切割图片中的 ref_height,我们可以根据自定义的要求进行设定,如某些标准的页面尺寸像素值。另外,一些异常情况也需要进行判断,图片的生成质量也可以进行调整 ,这些我们都要根据实际的应用进行调整。

另外,还可以通过API的方式,将网页内容保存为图片,循环生成对应的图片,以解决长图片切割的问题,可参考《C# 实现网页内容保存为图片并生成压缩包》。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • C/C++ Windows SAPI实现文字转语音功能
    本文通过封装Windows SAPI(Speech Application Programming Interface),提供了一个现代化的C++接口实现文字转语音功能。主要特性包括支持同步/异步语
  • C#结合html2canvas切割图片并导出到PDF

    C#结合html2canvas切割图片并导出到PDF
    需求 html2canvas 是一个 JavaScript 库,它可以把任意一个网页中的元素(包括整个网页)绘制到指定的 canvas 中,适用于生成网截图或将指定元
  • C#使用录音并导出录音数据

    C#使用录音并导出录音数据
    一、枚举电脑录音设备,指定设备录音 1、使用Vs2019的Nuget包管理器安装NAudio包 NAudio包 如图所示: 2、创建录音对象并指定录音格式 1 2 3 4
  • C#播放short或者byte类型的音频

    C#播放short或者byte类型的音频
    一、通过Nuget安装NAudio包 开发工具:vs2019 点击VisualStudio 2019的工具-NuGet包管理器-》管理解决方案的NuGet的程序包-》浏览-》在搜索框中输入
  • C# winfrom异步加载数据不影响窗体UI的操作方法
    在数字浪潮汹涌澎湃的时代,程序开发宛如一座神秘而宏伟的魔法城堡,矗立在科技的浩瀚星空中。代码的字符,似那闪烁的星辰,按照特
  • 使用C#实现AES加密与解密
    1. AES 加密简介 AES(Advanced Encryption Standard,高级加密标准)是一种对称加密算法,意味着加密和解密使用相同的密钥。AES 支持不同的密钥长
  • 在idea中利用maven实现多环境配置自动打包的流程

    在idea中利用maven实现多环境配置自动打包的流程
    spring的多环境配置 spring提供了多环境配置文件的功能,只需要根据配置文件后缀即可加载对应的配置文件 1 2 3 4 spring: profiles: # 修改后缀即
  • Java实现自定义重试工具类介绍
    Spring-retry、guava的Retry都提供有重试工具,但二者均存在一个确缺点,即如果重试等待过程中会一直阻塞工作线程,这对于在生产环境使用是
  • C#中SetStyle的具体使用介绍
    在C#的Windows Forms应用程序中,SetStyle方法是Control类的一个成员,用于启用或禁用特定的控件样式。这些样式控制控件的不同行为和外观。以
  • C# WinForm实现画笔签名功能介绍

    C# WinForm实现画笔签名功能介绍
    实现效果 签名功能的显示界面如下图: 该效果主要实现如下功能: 1、提供画布,设计画笔类,实现画笔签名 2、点击重签按钮清空画布
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计