CODEWITHSUNDEEP
javascriptjqueryhtml
user3663720
user3663720

Reputation: 305

Is it possible to get javascript to take a screenshot?

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?

Upvotes: 0

Views: 163

Answers (2)

Hatjhie
Hatjhie

Reputation: 1365

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.

Upvotes: 1

Derek
Derek

Reputation: 4751

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.

Upvotes: 1

Related Questions