是否有可能获取javascript截图?

时间:2014-10-11 01:49:59

标签: javascript jquery html

有点远,但有一个javascript函数/进程允许自动截取指定区域的屏幕截图,并将图片输出到我的计算机上的文件夹。理想情况下,它可以放入一个循环中,以便为每个循环迭代拍摄一张图片。

这远远可能吗?

2 个答案:

答案 0 :(得分:1)

如果您安装了安装了PHP的Web服务器,则可以使用wkhtmltoimage进行模拟。要每5秒生成一个新文件,您的JS将是:

$(document).ready(function() {
    function takeImage() {
        $.post(
            'htmltoimage.php',
            { currentUrl : window.location + "?stopTimer=1" }, // data that your script might need
            function(data) {
                if (data.url !== undefined) {
                    console.log("The URL where you can download your image is " + data.url);
                }
            },
            'json' // use JSON for expected return type
        );
    }
    var startTimer = <?php echo (isset($_POST['stopTimer']) ? "false" : "true"); ?>
    if (startTimer) { setTimeout(takeImage, 5000); }
});

您的PHP文件只会使用wkhtmltoimage转到您的网址。以最简单的形式:

<?php
    function() {
        $outputLocation = "/images/output_" . strtotime(date()) . ".png";
        // assuming wkhtmltoimage is in your PATH (otherwise specify full path to executable below)
        `wkhtmltoimage $_POST['currentUrl'] $outputLocation`;
        return array('url' => $outputLocation);
    }
?>

然后,您可以使用ImageMagick或类似的PHP图像处理库在您想要的位置裁剪它。

这也可以使用Adobe AIR或任何使用WebKit的程序来实现。

答案 1 :(得分:1)

是的,你可以。有一个有用的库。你可能想看看:

  

http://phantomjs.org/screen-capture.html

     

由于PhantomJS正在使用WebKit,一个真正的布局和渲染引擎,   它可以捕获网页作为截图。因为PhantomJS可以   在网页上呈现任何内容,它可用于转换内容   不仅在HTML和CSS中,还包括SVG和Canvas。

希望它有所帮助。