JS按钮获取当前页面截图 - Javascript

在Web应用程序，有时候我们需要从网站上获得当前页面的截图。JavaScript是一个非常强大的客户端脚本语言，可以很容易地实现这个功能。在这篇文章中，我们将介绍如何使用JavaScript从当前页面获取屏幕截图。

使用HTML5 canvas截图

使用HTML5 canvas，我们可以非常轻松地实现屏幕截图。首先，我们需要创建一个canvas元素，并将其设置为与屏幕大小相同。然后，我们可以使用drawImage()函数将当前页面的图像绘制到canvas上。最后，我们将使用toDataURL()函数将canvas作为base64图像返回。

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(window.parent.document.body, 0, 0, window.innerWidth, window.innerHeight, 0, 0, window.innerWidth, window.innerHeight);
var dataURL = canvas.toDataURL();
console.log(dataURL);

在上面的代码片段中，我们使用了window.parent.document.body来获取当前页面的HTML元素。这个方法是跨域的，因此我们可以从IFrame中或者其他不同的域中截图。最后，dataURL包含了我们需要的图片。

使用html2canvas截图

html2canvas是一个非常流行的JavaScript库，用于将整个文档转换为canvas，包括图像、SVG、DOM元素等。使用这个库很容易地从当前页面获取截图。

html2canvas(document.body).then(function(canvas) {
    console.log(canvas.toDataURL());
});

上面的代码片段就可以获得整个页面的截图，并将其作为base64图像传递给回调函数。

结论

使用JavaScript从当前页面获取屏幕截图非常容易。使用HTML5 canvas可以让我们直接获取当前页面的图像，而html2canvas则提供了一个更强大的工具，可以处理任何类型的客户端内容。