广东旅游网站建设,网站宣传推广方案,网游开发公司,wordpress企业文化模板目录
需求
开发运行环境
实现
生成HTML范例片断
HTML元素转BASE64
BASE64转图片
切割长图片
生成PDF文件
小结 需求
html2canvas 是一个 JavaScript 库#xff0c;它可以把任意一个网页中的元素#xff08;包括整个网页#xff09;绘制到指定的 canvas 中#xf…目录
需求
开发运行环境
实现
生成HTML范例片断
HTML元素转BASE64
BASE64转图片
切割长图片
生成PDF文件
小结 需求
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)可以获取表的详细信息包括表名、表说明、字段序号、字段名、字段说明、标识、主键、类型、长度、占用字节数、小数位数、允许空、默认值代码如下
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.colorder1 then d.name else end),表说明convert(nvarchar(50),case when a.colorder1 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 xtypePK and name in (SELECT name FROM sysindexes WHERE indid in(SELECT indid FROM sysindexkeys WHERE id a.id AND colida.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.isnullable1 then NULLelse NOT NULL end),默认值convert(nvarchar(50),isnull(e.text,))FROM syscolumns aleft join systypes b on a.xtypeb.xusertypeinner join sysobjects d on a.idd.id and d.xtypeU and d.namedtpropertiesleft join syscomments e on a.cdefaulte.idleft join sys.extended_properties g on a.idg.major_id and a.colidg.minor_idleft join sys.extended_properties f on d.idf.major_id and f.minor_id 0where d.nametablenameorder by a.id,a.colorder
END
运行效果如下图 现我们通过 DataSet 获取数据集数据并绑定显示在 DataGrid 控件q_dbgrid上。 如何获取数据集信息可阅读我的文章《C# 利用IDbDataAdapter / IDataReader 实现通用数据集获取》。
绑定示例代码如下 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库如下
script srchttps://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js/script
客户端示例代码如下
script languagejavascript typetext/javascriptwindow.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方法说明如下表
序号参数名类型说明1strbase64stringbase64数据2outputFilenamestring输出的图像文件全路径
实现代码如下
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文件使用。示例代码如下
string outjpgpath D:\\testPDF\\;
string filenameD:\\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.Heightref_height?1:sbitmap.Height % ref_height0?sbitmap.Height/ref_height:sbitmap.Height/ref_height1;
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# 实现网页内容保存为图片并生成压缩包》
感谢您的阅读希望本文能够对您有所帮助。
