0

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?

user3663720
  • 305
  • 2
  • 12
  • 1
    It would need to be something the layout engine could do and has exposed as JavaScript api. I seriously doubt that any current browsers could even do it. – Anthony Oct 11 '14 at 01:55
  • Not that i know of. This requires access to filesystem on the client side which JavaScript's doesn't have. Even if it did, javascript won't be able to capture screen like you have mentioned. – xaragen Oct 11 '14 at 02:00
  • http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots + http://html2canvas.hertzen.com/, but only to send it to server, it can not save it to the local filesystem. – Cheery Oct 11 '14 at 02:01
  • Cheers guys, though it was a bit ambitious! – user3663720 Oct 11 '14 at 02:04
  • @user3663720 Use AutoIt, separately (Windows only). It can do whatever you'll do it to do. https://www.autoitscript.com/site/autoit/ – Cheery Oct 11 '14 at 02:05
  • Sounds like a security hole. Imagine the possibilities.... it would have to be plugged if it allowed access to other websites' data or other screen activity. – Paul Oct 11 '14 at 02:06
  • Have you looked into html2canvas? – artm Oct 11 '14 at 02:34
  • You can use `wkhtmltopdf` to load a webpage and turn it into a PDF, either to save to the server or serve directly to the user. – Derek Oct 11 '14 at 02:36
  • short answer, yes this is possible. see my answer below – Derek Oct 11 '14 at 02:56
  • if you want to save the image to the local computer, http://danml.com/download.html will do that, but you'll have to make sure "ask where to save each time" is unchecked in chrome, or in FF, that "Always download this type" is chosen in the browser prefs. – dandavis Oct 11 '14 at 04:53

2 Answers2

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.

Derek
  • 4,575
  • 3
  • 22
  • 36
1

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.

Hatjhie
  • 1,366
  • 2
  • 13
  • 27