2014-10-11 202 views
0

一个长镜头的位,但有没有一个JavaScript函数/过程,它允许自动截取指定区域的截图,并将图片输出到我电脑上的文件夹。理想情况下,它可以放在一个循环中,以便为每个循环迭代拍摄一张照片。是否有可能得到JavaScript截图?

这完全是远程可能的吗?

+1

它将需要是布局引擎可以做的事情,并已公开为JavaScript API。我严重怀疑目前的浏览器甚至可以做到这一点。 – Anthony 2014-10-11 01:55:13

+0

不是我所知道的。这需要访问JavaScript没有的客户端文件系统。即使它确实如此,JavaScript也无法像您提到的那样捕获屏幕。 – xaragen 2014-10-11 02:00:07

+0

http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots + http://html2canvas.hertzen.com/,但只发送给服务器,它不能保存它到本地文件系统。 – Cheery 2014-10-11 02:01:14

回答

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

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

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

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

希望它有帮助。

相关问题