使用 HTML2canvas 进行网页局部截图

引言

任何网页都由多个 UI 组件组成，例如页眉、页脚、左侧菜单、多个内容区域等。当我提到“部分快照”时，我的意思是截取一个或多个特定页面内容，例如页面上的特定图表、表格等。

背景

有时，我们可能会有业务需求，允许打印特定的页面内容，或将页面内容复制到电子邮件中发送给收件人等。通常很容易找到截取整个页面屏幕截图的代码，但这通常会包含不需要的内容，如左侧菜单、页眉等。但要找出能够进行部分快照的代码却很难（至少我在应用程序中尝试实现这个需求时觉得很困难）。这篇博文将帮助您编写一段通用的代码，可以在多种与部分快照相关的场景中使用。

Using the Code

关键在于 JavaScript 库 html2canvas。我们需要在需要部分快照功能的地方添加此文件的引用。如果所有页面都需要此功能，则只需在某个主文件中添加引用即可。

基本原理是将 HTML 部分转换为 Canvas HTML 控件，然后将其用于请求的功能。

<script type="text/javascript" src="Scripts/html2canvas.js"></script>

接下来，我将展示捕获快照的示例代码。此示例代码应在页面加载时执行，但我们也可以轻松地将其绑定到按钮点击事件。

 <script language="javascript">
        $(document).ready(function () {
            html2canvas($("#testdiv"), {
                onrendered: function (canvas) {
                    var extra_canvas = document.createElement("canvas");
                    extra_canvas.setAttribute('width', 300);
                    extra_canvas.setAttribute('height', 300);
                    var ctx = extra_canvas.getContext('2d');
                    ctx.drawImage(canvas, 0, 0, 300, 300, 0, 0, 300, 300);
                    var myImage = extra_canvas.toDataURL("image/png");
                    document.getElementById("img").src = myImage;
                    $("[id*=hfImageData]").val(myImage);
                    window.open(myImage);
                }
            });
        });
</script>

#	代码	解释
	<script language="javascript">
	$(document).ready(function () {	此行确保代码将在页面加载时执行。
	html2canvas($("#testdiv"), {	需要截取快照的内容所在的 div。此处是硬编码的，但可以轻松地将其作为参数传递。在此函数内进行的所有操作都将针对此 div 中的内容执行。
	onrendered: function (canvas) {	将执行所有工作的核心函数。
	var extra_canvas = document.createElement("canvas");	我们本来可以直接使用默认的 canvas 控件，但我遇到了一个问题，在这种情况下，图像的大小不正确。因此，引入了自定义 canvas 控件的额外逻辑。
	extra_canvas.setAttribute('width', 300);	设置自定义 canvas 的宽度。
	extra_canvas.setAttribute('height', 300);	设置自定义 canvas 的高度。
	var ctx = extra_canvas.getContext('2d');	将上下文设置为二维，并将其存储在一个变量中。
	ctx.drawImage(canvas, 0, 0, 300, 300, 0, 0, 300, 300);	现在绘制图像并设置各种偏移量、宽度和高度。确保宽度和高度与步骤 6 和 7 中设置的相同。
	var myImage = extra_canvas.toDataURL("image/png");	最后，从自定义 canvas 获取图像，这样我们就完成了。下面的几行代码展示了此图像的多种用途。
	document.getElementById("img").src = myImage;	我们可以将图像设置到另一个 div 中。
	$("[id*=hfImageData]").val(myImage);	我们可以将图像作为字节数组获取到一个隐藏字段中。这是一个非常重要的用途。我稍后会展示如何操作。
	window.open(myImage);	我们可以在新窗口中打开图像并用于打印。
	}
	});
	});
	</script>

这段代码可以被通用化，并写入某个通用的 JavaScript 文件，以便在整个应用程序中使用，或者您可以将这段代码复制到特定文件中来使用。无论哪种情况，逻辑都是相同的。只有 div 的 ID 和图像的尺寸会改变。

因此，只需这几行代码和对 htmltocanvas js 文件的引用，我们就可以实现这个典型的功能。

• 第 2 行：确保代码将在页面加载时执行。这可以轻松地替换为按钮点击事件，如下所示：

$(document).ready(function () { 

$('#button').on("click", function () {            
captureSnapshot(); 
}); 

function captureSnapshot () {…….}

在隐藏字段中使用图像字节

我们还没有结束。还有更多内容。我在上面展示了如何将图像作为字节数组获取到一个隐藏字段中。我们可以将此隐藏字段的值存储在数据库中，以后也可用于审计、快照等。

请参阅下面的示例代码，了解如何访问隐藏字段并将其转换为字节数组。

1	string base64 = Request.Form[hfImageData.UniqueID].Trim().Split(',')[1];	只需将隐藏字段的内容按逗号 (,) 分割，然后获取第二个值。
2	byte[] bytes = Convert.FromBase64String(base64);	使用 .NET API 转换为字节数组。
3	MemoryStream stream = new MemoryStream(bytes);	我们可以以多种方式使用字节数组，例如将其存储在数据库中。在我的示例中，我将其转换为流，然后就可以使用它生成图像。我也可以从此流创建物理图像文件，并将其存储在合适的位置。

这是与 html to canvas 代码关联实现的附加功能。我个人认为，如果使用得当，这是对核心逻辑的一个非常好的补充。

以上就是实现此部分快照功能所需了解的一切。希望这对您的工作有所帮助。

参考文献

• http://stackoverflow.com/questions/31656689/how-to-save-img-to-users-local-computer-using-html2canvas

历史

• 2016 年 6 月 6 日：初始版本