Question

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

的代码

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

这是演示可用的website。

我的问题是我是html2canvas的新手，我无法弄清楚如何粘贴此代码并在我的本地文件中使用它。我真的很感激，如果有人可以给我步骤或解释我在哪里以及如何使用此代码使其截图我的本地网页。

Answer 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-type 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或类似的方式传输。

如何在Javascript中渲染body元素

1 个答案: