如何在Javascript中渲染body元素

How to render body element in Javascript

本文关键字：body 元素 Javascript      更新时间：2023-09-26

我使用html2canvas来拍摄我的网页的快照，并将其粘贴在我的服务器的某个地方。我试图渲染身体元素，并将画布大小限制为300x300px这是用来欺骗

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

这是演示的网站

我的问题是，我是新的html2canvas，我不知道如何粘贴这段代码，并使用它在我的本地文件。我真的很感激，如果有人能给我的步骤或解释我在哪里以及如何使用这个代码，使其截图我的本地网页。

恐怕我真的不明白你想做什么。上面的代码应该已经截取了你的网页的截图。你只需要包含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方案呈现图像。这意味着，在运行时创建图像文件，然后写入画布(通过drawImage())。

要获取该数据，可以调用toDataURL()函数:

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

相关文章：