是否可以獲取JavaScript進行屏幕截圖？

Question

有點遠，但是有一個javascript函數/過程可以自動拍攝指定區域的屏幕快照，並將圖片輸出到我計算機上的文件夾中。 理想情況下，它將能夠放入循環中，以便為每次循環迭代拍攝一張照片。

這根本不可能嗎？

Answer 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轉到您的URL。 最簡單的形式：

<?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的任何程序來實現。

Answer 2

是的你可以。 有一個有用的庫。 您可能想看看：

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

由於PhantomJS使用的是WebKit，它是真正的布局和渲染引擎，因此它可以捕獲網頁作為屏幕截圖。 由於PhantomJS可以呈現網頁上的任何內容，因此它不僅可以用於轉換HTML和CSS中的內容，還可以用於轉換SVG和Canvas中的內容。

希望能幫助到你。