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

in 前端 with 0 comment

(一)、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包含

优点:支援的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.guotianyu.cn/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的位置即可

Responses