[Solved-4 Solutions] Using HTML5/Canvas/javascript to take in-browser screenshots - javascript Tutorial
Problem:
To select an area of browser window to take a screenshot that is submitted with our feedback about a bug.
How are they doing this ? Google's JavaScript feedback API is loaded will demonstrate the screenshot capability.
Solution 1:
Html2canvas library to make screenshot using js browser.
function report() {
let region = document.querySelector("body"); // whole screen
html2canvas(region, {
onrendered: function(canvas) {
let jpgUrl = canvas.toDataURL();
let img = document.querySelector(".screen");
img.src = jpgUrl; // jpgUrl contains screenshot graphics data in url form
// here you can allow user to set bug-region
// and send it with 'jpgUrl' to server
},
});
}
Read Also
strokerect() method in HTML5 canvas.container {
margin-top: 10px;
border: solid 1px black;
}
margin-top: 10px;
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>
<div class="container">
<img width="75%" class="screen">
</div>
In report() function in on rendered after getting image as data uri show it to user and allow draw "bug region" by mouse and then send screenshot and region coordinates to server.
Solution 2:
- JavaScript can read the DOM and render a fairly accurate representation of that using canvas. We have been working on a script which converts html into canvas image.
- The script allows to create feedback forms which include a screenshot, created on the clients browser, along with the form.
- The screenshot is based on the DOM not accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
- It doesn't require any rendering from the server, as the whole image is created on the clients browser. The HTML2Canvas script is still in a experimental state.
- CSS3 attributes we would want it to, nor does it have any support to load CORS images even if a proxy was available.
Read Also
Create image data method in HTML5 canvasSolution 3:
- Web app can take a 'native' screenshot of the client's entire desktop using
getUserMedia(): -
The client will have to be using chrome need to enable screen capture to support under chrome:
//flags.
Solution 4:
- Third party library is open source and works really well, even with complicated HTMLs. We provide the URL from where we want to take a screenshot and other parameters like size, quality, etc.
- There's a cloud service wrapping this library.