如何使用html2canvas用JavaScript创建网站的屏幕截图

本文概述

• 要求
• 创建你的网站的屏幕截图
• 创建并下载屏幕截图
• 从dom元素创建图像

除非你是另一个世界的上等人, 否则Web App上的错误是我们日常生活的一部分。有时, 尽管异常应该由你的代码自动报告, 但在某些情况下, 用户可能希望自己报告错误, 并且在大多数情况下, 用文字还不足以解释你真棒应用程序上的错误情况。这只是使用Javascript直接在浏览器中拍摄屏幕快照的实用程序的众多用途之一。

为了在不使用第三方服务的情况下创建网站的屏幕截图, 建议你使用超赞的html2canvas库。该脚本使你可以直接在用户浏览器上拍摄网页或其一部分的”屏幕快照”。屏幕截图基于DOM, 因此可能无法真实表示100％的准确度, 因为它无法生成实际的屏幕截图, 而是根据页面上的可用信息构建屏幕截图。该库在以下浏览器(使用Promise polyfill)上应该可以正常工作：

• Firefox 3.5+
• 谷歌浏览器
• 歌剧12+
• IE9 +
• Safari 6+

由于需要手动构建每个CSS属性以使其受支持, 因此有许多尚不支持的属性。由于整个图像都是在客户端浏览器上创建的, 因此它不需要服务器渲染。但是, 由于它严重依赖于浏览器, 因此该库不适合在nodejs中使用。它也没有神奇地规避任何浏览器内容策略限制, 因此呈现跨域内容将需要代理才能使内容具有相同的来源。

要求

如前所述, 为了创建DOM元素的屏幕截图, 我们将使用html2canvas库。你可以使用以下命令通过NPM下载该库：

npm install html2canvas

或者, 如果你更喜欢凉亭：

bower install html2canvas

否则, 只需在此处的存储库中获取可分发内容的副本(html2canvas.min.js), 然后使用script标记简单地添加对脚本的引用：

<script src="/path/to/html2canvas.min.js"></script>

如果你需要有关该库的更多信息, 请在此处访问Github中的官方资源库。

重要

html2canvas库利用Javascript Promises, 希望它们在全局环境中可用。如果你希望支持本身不支持Promises的旧版浏览器, 则需要在包含html2canvas之前添加诸如es6-promise之类的polyfill。

创建你的网站的屏幕截图

html2canvas库非常简单(只有它的用法, 因为该库本身是不固定的), html2canvas函数将显示在窗口中(或者, 如果你使用browserify, 则将其作为一个模块使用), 该函数期望作为第一个参数你要导出为图像的DOM元素。因此, 如果要创建整个网站的屏幕快照, 则需要将文档的body元素作为html2canvas函数的第一个参数传递。当它返回一个Promise时, 你需要添加then函数, 一旦导出准备好将执行该函数。

在此示例中, 屏幕截图将以png格式生成, 并在准备好后将在新窗口中显示：

html2canvas(document.body).then(function(canvas) {
    // Export the canvas to its data URI representation
    var base64image = canvas.toDataURL("image/png");

    // Open the image in a new window
    window.open(base64image , "_blank");
});

很清晰易懂不是吗？

创建并下载屏幕截图

你可能需要将下载屏幕截图功能添加到你的应用中。为此, 你将需要文档中的FileSaver插件, 请在此处的官方Github存储库中了解有关此插件的更多信息。 FileSaver插件将允许你直接在浏览器中从Blob生成下载。要下载生成的屏幕截图, 有2个选项：

使用toBlob方法

画布使用HTML5引入了新方法canvas.toBlob(), 该方法与toDataURL不同, 它直接将画布的内容导出为Blob。但是, 该方法并非在所有浏览器中都可用, 但是如果你决定以这种方式使用它, 则可以使用Polyfill。使用html2canvas, toBlob方法和filesaver, 你可以轻松生成网站屏幕截图的下载：

html2canvas(document.body).then(function(canvas) {
    // Export canvas as a blob 
    canvas.toBlob(function(blob) {
        // Generate file download
        window.saveAs(blob, "yourwebsite_screenshot.png");
    });
});

将base64转换为Blob

如果你不想在应用程序需要为过时的浏览器提供支持的情况下使用大量的polyfill, 可将base64图像直接转换为Blob, 然后使用FileSaver保存(尽管你需要使用更多代码)。但是, 你将需要创建一个将数据URI转换为Blob的函数：

/**
 * Convert a base64 string in a Blob according to the data and contentType.
 * 
 * @param b64Data {String} Pure base64 string without contentType
 * @param contentType {String} the content type of the file i.e (image/jpeg - image/png - text/plain)
 * @param sliceSize {Int} SliceSize to process the byteCharacters
 * @see http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
 * @return Blob
 */
function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
}

// Generate screenshot and download
html2canvas(document.body).then(function(canvas) {
    // Generate the base64 representation of the canvas
    var base64image = canvas.toDataURL("image/png");

    // Split the base64 string in data and contentType
    var block = base64image.split(";");
    // Get the content type
    var mimeType = block[0].split(":")[1];// In this case "image/png"
    // get the real base64 content of the file
    var realData = block[1].split(", ")[1];// For example:  iVBORw0KGgouqw23....

    // Convert b64 to blob and store it into a variable (with real base64 as value)
    var canvasBlob = b64toBlob(realData, mimeType);

    // Generate file download
    window.saveAs(canvasBlob, "yourwebsite_screenshot.png");
});

不管选择哪种方法, 它们都以相同的方式工作。

从dom元素创建图像

另外, 你可以从任何DOM元素创建图像, 但是, 正如我们在本文开头所说, 与DOM到图像库不同, html2canvas不能很好地与JavaScript创建或动态修改的内容配合使用。

要从文档中的特定div或元素创建图像, 只需选择它并将其作为第一个参数传递给html2canvas函数：

var element = document.getElementById("some-element-of-your-document");

html2canvas(element).then(function(canvas) {
    // Export the canvas to its data URI representation
    var base64image = canvas.toDataURL("image/png");

    // Open the image in a new window
    window.open(base64image , "_blank");
});

编码愉快！