需求 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)),可以获取表的详细信息,包括(表名、表说明、字段序号、字段名、字段说明、标识、主键、类型、长度、占用字节数、小数位数、允许空、默认值),代码如下:
运行效果如下图: 现我们通过 DataSet 获取数据集数据,并绑定显示在 DataGrid 控件(q_dbgrid)上。 如何获取数据集信息可参考《C# 利用IDbDataAdapter / IDataReader 实现通用数据集获取》。 绑定示例代码如下:
HTML元素转BASE64在页面上放置 canvas 画布控件(myCanvas)和临时存放BASE64数据的 TextBox 控件(ds),首先需要引用 html2canvas js库,如下:
客户端示例代码如下:
通过 html2canvas 方法生成 jpeg类型的图像数据(canvas.toDataURL("image/jpeg"))并存储在 ds 控件里。 BASE64转图片Base64StringToImage方法说明如下表:
实现代码如下:
切割长图片为保证较好的显示效果,可能需要对长图片进行切割,生成多个图像文件,并存到指定的目录里,以备后续导出生成PDF文件使用。示例代码如下:
outjpgpath为输出的多图片目录,filename 为生成的长图的地址。 ref_height为自定义的切割高度,根据指定切割高底生成若干“子”图片。 生成PDF文件通过读取目录中的多个图像文件生成PDF,可参考《C# 将批量图片转为PDF文件》,这里不再赘述。 小结切割图片中的 ref_height,我们可以根据自定义的要求进行设定,如某些标准的页面尺寸像素值。另外,一些异常情况也需要进行判断,图片的生成质量也可以进行调整 ,这些我们都要根据实际的应用进行调整。 另外,还可以通过API的方式,将网页内容保存为图片,循环生成对应的图片,以解决长图片切割的问题,可参考《C# 实现网页内容保存为图片并生成压缩包》。 |
2022-05-13
2022-03-10
2023-12-24
2021-07-02
2021-08-14