javascript - Is it possible to capture a screenshot of the client's desktop from within a web application? - Stack Overf

admin管理员组

文章数量:1313735

I would like to know if it is possible to capture a screenshot of the client's desktop from within a JavaScript based web application. I want to provide to the users a button within the application that they can use to take a screenshot of their desktop screen (not the page, or elements in the page, the actual OS desktop screen).

Does the main browsers (Chrome and Firefox) allow this kind of operation? I'm aware that there may be security concerns, but could I maybe ask permission from the user to have this kind of access? Are there any libs, tools or documentation that can help me with that? Or is this just not feasible?

I did some research on the subject but only found methods to take a screenshot of content within the browser.

I would like to know if it is possible to capture a screenshot of the client's desktop from within a JavaScript based web application. I want to provide to the users a button within the application that they can use to take a screenshot of their desktop screen (not the page, or elements in the page, the actual OS desktop screen).

Does the main browsers (Chrome and Firefox) allow this kind of operation? I'm aware that there may be security concerns, but could I maybe ask permission from the user to have this kind of access? Are there any libs, tools or documentation that can help me with that? Or is this just not feasible?

I did some research on the subject but only found methods to take a screenshot of content within the browser.

• javascript
• google-chrome
• firefox
• browser
• web-applications

Share Improve this question Follow asked Oct 18, 2017 at 11:36 adamasanadamasan 1,20222 gold badges1616 silver badges4646 bronze badges 1

• 1 Possible duplicate of How to capture screenshot of parts of the client "desktop" using HTML/JavaScript ? – Nisarg Shah Commented Oct 18, 2017 at 11:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Looks like this one will help you: How to capture screenshot of parts of the client "desktop" using HTML/JavaScript ?

With WebRTC and Screen Capturing, you can take desktop screenshots (it's supported in both Firefox and Chrome). The Javascript library RTCMultiConnection is very useful for working with WebRTC, but it's also possible without the use of an additional library.

Yes, it allows to do that. I do not know if it is a good way to start but you can examine an open source app that does the job.

Here is chromium remote control app source. you can find pieces of code that captures the screen. I would like to hear from you if you get the job done.

Chromium remote control app link

You can only capture images or video frames as a screenshot using Canvas. But if you want to capture particular element on a web page try this library: html2canvas

Here is the code:

Note: Adjust dimensions carefully in drawImage() function

$(".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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare./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>

本文标签：