Question

这里我的代码拍摄了300px / 300px的快照。

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

测试它我刚刚放了一个这样的

<a href="#" onclick="html2canvas(element, options);"> CANVAS </a>

但是当我点击时看不到任何东西......我是否需要为快照添加标签？

Answer 1

在onclick中，您传递的元素和选项应该是一个元素（例如document.body），而选项是html2canvas方法中的第二个参数。

如果你在html2canvas.js中使用jquery，你可以执行以下操作： -

这是您点击以获取快照的链接

<a href="#" id="snapshot">Test snapshot</a>

这就是脚本的样子

<script>
    $("#snapshot").click(function()
    {
        html2canvas(document.body,
        {
            onrendered: function(canvas)
            {
                document.body.appendChild(canvas);
            },
            width: 300,
            height: 300
        });
    });
</script>

Answer 2

代码的第一部分不是函数的声明。请尝试以下操作：

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

然后致电

<a href="#" onclick="performScreenshot(document.body);"> CANVAS </a>

请记住＆＃34;脚本使用的所有图像都需要位于相同的原点下，以便能够在没有代理帮助的情况下读取它们。（html2canvas documentation）

Answer 3

现在是我正确的代码，它有效。

$(document).ready(function Canvas(){
   html2canvas($('#col2Game'), {
      onrendered: function (canvas) {
      document.body.appendChild(canvas);
      }
   });
});

我有我的get_uploads.php文件

$id = $_GET['id'];
$folder = 'uploads';
$handle = opendir($folder);

while(($file = readdir($handle)) !== false){
    if($file != '.' && $file != '..'){

        $nameFile = explode('.',$file);

        if($nameFile[0] == $id)
        {
            echo '<img src="'.$folder.'/'.$file.'?time='.time().'"/>';
            exit();
        }
    }
}

echo 'error';

使用我的upload.php文件

if(isset($_GET['id']))
{
    $id= $_GET['id'];

    $folder = 'uploads/';
    $filename = $id.'.jpg';
    $input_con = file_get_contents("php://input");
    $file_path = $folder.$filename;

    file_put_contents($file_path, $input_con);
}

但是如何将我的画布快照放入uploads文件夹？

快照html 5画布

3 个答案: