如何在Javascript中渲染body元素答案

【问题标题】：How to render body element in Javascript如何在Javascript中渲染body元素
【发布时间】：2014-07-13 06:51:58
【问题描述】：

我正在使用 html2canvas 拍摄我的网页快照并将其粘贴到我的服务器中的某个位置。我正在尝试渲染 body 元素并将画布大小限制为 300x300px 这是用来欺骗的代码

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 300,
  height: 300
});

这是提供演示的website。

我的问题是我是 html2canvas 的新手，我不知道如何粘贴此代码并将其用于我的本地文件。如果有人能给我提供步骤或解释我在哪里以及如何使用此代码来截取我的本地网页，我将不胜感激。

【问题讨论】：

标签： javascript canvas html2canvas

【解决方案1】：

我很害怕，但我真的不明白你想做什么。上面的代码应该已经对您的网页进行了截图。您只需包含 html2canvas.js 并将代码粘贴到您的主 JavaScript 文件或文档头中。

<head>
    ...
    <script src="js/html2canvas.js"></script>
    <script>
        html2canvas(document.body, {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
            },
            width: 300,
            height: 300
        });       
     </script>
</head>

将该图像保存到您的服务器有点棘手。 HTML2Canvas 通过Data URI scheme 呈现图像。这意味着，在运行时会创建一个图像文件，然后将其写入画布（通过drawImage()）。

要取回该数据，您可以致电toDataURL() function：

html2canvas(document.body, {
    onrendered: function(canvas) {
        var imageData = canvas.toDataURL();
    },
    width:300,
    height:300
});

就我而言，该 imageData 变量包含类似data:image/png;base64,iVBORw0KGgoA... 的内容。这是具有 mime 类型 image/png 的图像数据的 base64 编码字符串。要将该图像保存到您的服务器，您需要能够写入服务器的内容。由于 JavaScript 在客户端（在您的浏览器中）运行，因此不允许这样做。您可以使用 AJAX 调用将该数据发送到 PHP 文件：

html2canvas(document.body, {
    onrendered: function(canvas) {
        var imageData = canvas.toDataURL(),
            request = new XMLHTTPRequest() || new ActiveXObject("Microsoft.XMLHTTP");
        request.open("POST","saveImage.php",true);
        request.setRequestHeader("Content-type","image/png");
        request.send("imageData=" + imageData);

    },
    width:300,
    height:300
});

该 PHP 文件的内容可能如下所示：

<?php
if($_SERVER["REQUEST_METHOD"] !== "POST") die;

$fp = fopen("path/to/image/folder/" . time() . ".png","w");
fwrite($fp,base64_decode($_POST["imageData"]));
fclose($fp);
?>

实际上，我会这样做。但代码未经测试。如果您有任何问题，请随时提出！

编辑：不确定 image/png 的内容类型是否正确，或者是否必须以 text/plain 或类似的方式传输。

【讨论】：

非常感谢您的解释。我已经按照您的解释做了所有事情，但是如果我想下载屏幕截图而不是在网页上显示它，我该怎么做？
您可以创建一个图像而不是画布：var imageData = canvas.toDataURL(), image = new Image(); image.src = imageData; document.body.appendChild(image); 这将显示一个“正常”图像而不是您可以通过右键单击下载的画布 -> 保存...