是否可以获取JavaScript进行屏幕截图？

Question

Bit of a long shot, but is there a javascript function/process which allows automatically takes a screenshot of a specified area, and outputs a picture to a folder on my computer. Ideally, it would be able to put within a loop so that it takes a picture for each loop iteration.

Is this at all remotely possible?

Answer 1

If you have a web server with PHP installed, you can simulate this using wkhtmltoimage . To generate a new file every 5 seconds, your JS would be:

$(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); }
});

Your PHP file would simply use wkhtmltoimage to go to your URL. In its most simple form:

<?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);
    }
?>

You can then crop it at the positions you desire using ImageMagick or a similar PHP image processing library.

This can also be achieved using Adobe AIR, or really any program that uses WebKit.

Answer 2

Yes, you can. There is a useful library for that. You might want to take a look:

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

Since PhantomJS is using WebKit, a real layout and rendering engine, it can capture a web page as a screenshot. Because PhantomJS can render anything on the web page, it can be used to convert contents not only in HTML and CSS, but also SVG and Canvas.

Hope it helps.