Take Screenshot of a Web Page client side or server side
Take a look at wkhtmltoimage. Feed it some HTML and it will render an image of what the page might look like in a Webkit browser ("might" because browsers vary and Webkit is constantly being worked on)
How to take a screenshot of a webpage using html5, without rendering it on a canvas via JS
This is simpler than it seemed. The missing part, saving a still shot of the video to png, can be achieved with code from this answer. The complete code would be as follows:
const v = document.getElementById("v");const b = document.getElementById("b");const i = document.getElementById("i");
navigator.mediaDevices.getDisplayMedia({ audio: false}).then((r) => { console.log(r); v.srcObject = r;}).catch((e) => { console.log("this must be run in a secure context. Stack snippets (rightfully) refuse to run this.");});
b.onclick = () => { // take screenshot // from https://stackoverflow.com/a/44325898/15472 let scale = 1;
const canvas = document.createElement("canvas"); canvas.width = v.clientWidth * scale; canvas.height = v.clientHeight * scale; canvas.getContext('2d').drawImage(v, 0, 0, canvas.width, canvas.height);
i.src = canvas.toDataURL(); // you can send i.src here to a server
// stop video let tracks = v.srcObject.getTracks(); tracks.forEach(track => track.stop()); v.srcObject = null;}
#v,#i { width: 400; height: 300;}
#v { border: 1px solid blue;}
#i { border: 1px solid green;}
<div> <video id="v" autoplay></video> <button id="b">take screenshot</button> <img id="i" src="//:0" /></div>
How to generate screenshot of a website from a URL?
Take a look to PhantomJS. You can generate png screenshot throught command line.
Here's a script for PhantomJS which take two input arguments (url and output file):
var page = require('webpage').create();
var args = require('system').args;
var web_url = args[1];
var file_name = args[2];
page.viewportSize = { width: 1200, height: 1602 };
page.clipRect = {top:0, left: 0, width: 1200, height: 1602 };
page.open(web_url, 'GET', function () {
page.evaluate(function() {
document.body.bgColor = 'white';
});
var ret = page.render(file_name);
var exitcode = 0;
if(ret) exitcode = 1;
phantom.exit(exitcode);
});
And then you can call to PhantomJS like this:
phantomjs scriptfile.js http://www.myweb.com outputfile.png
how to capture screenshot in html using js or jquery
Web pages are not the best things to be "screenshoted", because of their nature; they can include async elements, frames or something like that, they are usually responsive etc...
For your purpose the best way is to use external api or an external service, I think is not a good idea to try doing that with JS.
You should try url2png
Using HTML5/Canvas/JavaScript to take in-browser screenshots
JavaScript can read the DOM and render a fairly accurate representation of that using canvas
. I have been working on a script which converts HTML into a canvas image. Decided today to make an implementation of it into sending feedbacks like you described.
The script allows you to create feedback forms which include a screenshot, created on the client's browser, along with the form. The screenshot is based on the DOM and as such may not be 100% 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 does not require any rendering from the server, as the whole image is created on the client's browser. The HTML2Canvas script itself is still in a very experimental state, as it does not parse nearly as much of the CSS3 attributes I would want it to, nor does it have any support to load CORS images even if a proxy was available.
Still quite limited browser compatibility (not because more couldn't be supported, just haven't had time to make it more cross browser supported).
For more information, have a look at the examples here:
http://hertzen.com/experiments/jsfeedback/
edit
The html2canvas script is now available separately here and some examples here.
edit 2
Another confirmation that Google uses a very similar method (in fact, based on the documentation, the only major difference is their async method of traversing/drawing) can be found in this presentation by Elliott Sprehn from the Google Feedback team:
http://www.elliottsprehn.com/preso/fluentconf/
Related Topics
How to Add an Object to an Array
Sending Credentials with Cross-Domain Posts
How to Guarantee That My Enums Definition Doesn't Change in JavaScript
Get All Attributes of an Element Using Jquery
How to Set Default Homepage in Ff and Chrome via JavaScript
What Is Ajax and How Does It Work
Is There a Built-In Way to Loop Through the Properties of an Object
How to Wrap/Surround Highlighted Text with an Element
How to Disable Text Selection Using Jquery
How to Call 3 Functions in Order to Execute Them One After the Other
Merge JavaScript Objects in Array with Same Key
Differencebetween State and Props in React
How to Return Values from Async Functions Using Async-Await from Function
Regarding Promises/A+ Specification, Differencebetween the Terms "Thenable" and "Promise"
Checking If Jquery Is Loaded Using JavaScript