2017-10-18 154 views
0

我想知道是否有可能从基于JavaScript的Web应用程序中捕获客户端桌面的屏幕截图。我想向用户提供应用程序中的一个按钮,用户可以使用它们截取其桌面屏幕(而不是页面或页面中的元素,实际的OS桌面屏幕)的屏幕截图。是否可以从Web应用程序中捕获客户端桌面的屏幕截图?

主浏览器(Chrome和Firefox)是否允许这种操作?我意识到可能存在安全问题,但是我可以请求用户允许进行此类访问吗?有没有可以帮助我的库,工具或文档?或者这是不可行的?

我做了一些关于这个主题的研究,但只找到了在浏览器中截取内容的方法。

+1

的可能的复制[如何捕获客户端“桌面”使用的HTML/JavaScript的部分截图?](https://stackoverflow.com/questions/34723564/how-to -apture-screenshot-of-the-client-desktop-using-html-javascript) – Nisarg

回答

0

您只能使用画布捕捉图像或视频帧作为屏幕截图。但是,如果你想捕捉网页上的特定元素试试这个库:html2canvas

下面是代码:

注:在的drawImage仔细调整尺寸()函数

$(".drag").draggable(); 
 
$(".drag").droppable(); 
 
var takeScreenShot = function() { 
 
    html2canvas(document.getElementById("container"), { 
 
     onrendered: function (canvas) { 
 
      var tempcanvas=document.createElement('canvas'); 
 
      tempcanvas.width=350; 
 
      tempcanvas.height=350; 
 
      var context=tempcanvas.getContext('2d'); 
 
      context.drawImage(canvas,112,0,288,200,0,0,350,350); 
 
      var link=document.createElement("a"); 
 
      link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS 
 
      link.download = 'screenshot.jpg'; 
 
      link.click(); 
 
     } 
 
    }); 
 
}
#container{ 
 
    width:400px; 
 
    height:200px; 
 
} 
 
#rightcontainer{ 
 
    width:300px; 
 
    height:200px; 
 
    background:gray; 
 
    color:#fff; 
 
    margin-left:110px; 
 
    padding:10px; 
 
} 
 
#leftmenu{ 
 
    color:#fff; 
 
    background-color:green; 
 
    width:100px; 
 
    height:200px; 
 
    position:fixed; 
 
    left:0; 
 
    padding:10px; 
 
} 
 

 
button{ 
 
    display:block; 
 
    height:20px; 
 
    margin-top:10px; 
 
    margin-bottom:10px; 
 
} 
 
.drag{ 
 
    width:40px; 
 
    height:20px; 
 
    background-color:blue; 
 
    z-index:100000; 
 
    margin-top:10px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
    
 
    
 
<button onclick="takeScreenShot()">Snapshot</button> 
 
<div id="container"> 
 
    <div id="leftmenu"> 
 
     Left Side 
 
     <div class="drag"> 
 
     </div> 
 
     <div class="drag"> 
 
     </div> 
 
     <div class="drag"> 
 
     </div> 
 
     Drag-----------> 
 
      & 
 
     Click Snapshot 
 
    </div> 
 
    <div id="rightcontainer"> 
 
     Right Side 
 
    </div> 
 
</div>

+0

但是,我需要的是捕获用户桌面的屏幕截图,而不是Web应用程序中的内容。 – artie

0

是的,它允许这样做。我不知道这是不是一个好的开始,但你可以检查一个开源的应用程序来完成这项工作。

这里是铬远程控制应用程序源码。你可以找到捕捉屏幕的代码段。如果你完成了工作,我想听到你的消息。

铬遥控应用link

相关问题