网页快照几种实现方案参考

(一)、HTML转图片

1.使用 html2canvas 制作网页快照

（1）介绍

官网： https://html2canvas.hertzen.com/
Html2canvas是一个JS库，通过在web引入JS的方式，点击按钮后可以根据ID呼叫需要制作快照的标签，会根据标签制作成图片。

（2）使用方法

如需要制作快照的html为：

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4></div>

那么使用html2canvas 制作快照只需要

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)});

（3）特征

其支援的WebBrowser包含

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

优点：支援的WebBrowser较多，使用比较方便，只需要引入一个JS即可
缺点：需要根据ID制作快照

2.使用wkhtmltoimage 制作网页快照

（1）介绍

官网：https://wkhtmltopdf.org/
wkhtmltoimage是一个独立的程序，和wkhtmltopdf属于同一个程序中，支援Windows、Ubuntu、Centos、Debian、MacOS等主流操作系统，安装完毕之后使用十分方便，只需要一个url即可制作成快照图片或者pdf。

（2）使用方法

使用简单，只需要一个可以访问的url即可

wkhtmltoimage http://openclever.pro/OpenRich/admin/login.aspx login.png

Wkhtmltoimage [要制作快照的url] [输出档的路径]
完整中文参数详解在：https://note.coccoo.cc/Archive/wkhtmltopdforimage_params_zh.html

（3）特征

优点：使用十分方便，支援的操作系统较多
缺点：需要使用可以直接访问的url（如果需要登陆的页面可能无法拍快照）

3.使用WebSiteThumbnail制作网页快照（C#）

（1）介绍
使用WebSiteThumbnail.cs制作网页快照，把这个class放入C#项目中，然后直接呼叫GetWebSiteThumbnail这个Function就可以制作快照图片。

WebSiteThumb.cs下载

（2）使用方法

    //在任意网页中的Page_Load事件时，加入如下代码：
       protected void Page_Load(object sender, EventArgs e)
       {
           Bitmap m_Bitmap = WebSiteThumbnail.GetWebSiteThumbnail("http://www.google.cn", 600, 600, 600, 600);
           MemoryStream ms = new MemoryStream();
           m_Bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);//JPG、GIF、PNG等均可
           byte[] buff = ms.ToArray();
           Response.BinaryWrite(buff);
       }

（3）特征
优点：C#语言，可以融入项目中
缺点：没来得及测试，暂不清楚效果如何

（二）、存储当前网页的Coding版本渲染

1.使用保存Html源码的形式制作快照

（1）介绍
把整个html的源代码（包含所有html、js和css）保存下来，类似于在浏览器中Ctrl+S存储为 .html 的档案，命名为 文件名-版本号.html，如 detail-26018.html，这样只需要记录版本号 26018 就可以找到对应的文件名称，直接展示即可作为快照使用。
（2）使用方法
把渲染出来的画面直接保存为 xxx-version.html ，需要查看快照的时候直接展示在浏览器即可。
（3）特征
优点：便于存储和管理，可以还原成页面原本的样子
缺点：存储大量档可能会导致服务器缓慢，可以不存在DB而是存于io中，DB直接保存io的位置即可