Menu
I am attempting to let users on my site push a button to take a screenshot of the current screen ( everything in body).
From my research, html2canvas seems to be a resource that makes this possible.
My issue is the documentation does not provide example code and I am struggling to get a grip on the steps involved.
http://html2canvas.hertzen.com/documentation.html
The following SO question ( How to upload a screenshot using html2canvas? ) leaves me a bit confused. I just want to know how to get an image at this point.
From his code.
$(window).ready(function(){
('body').html2canvas();
var canvasRecord = new html2canvas(document.body).canvas;
//At this point does the .toDataURL method return a png?
});
At this point I am lost where the image is, or even how/when to create it. Ill worry sending it to the server later.
Any information appreciated. Thanks! (html2canvas even needed?)
685
As you are using the html2canvas jQuery plugin, here is a sample snippet
var screenshot;
$('body').html2canvas({
onrendered: function(canvas) {
screenshot = canvas.toDataURL();
//code to process/send the image to server
}
});
In the above code snippet the html2canvas creates the screenshot of the page.
You can also use PhantomJS to create screenshots of webpages - provided that they are public pages, because you may not be able to access login protected pages on the server-side; in such situations only a client-side solution like html2canvas will work.
144
$("#screenshot").click(function() {
$("body").html2canvas({
onrendered: function( canvas ) {
$(".filt_opt_n").html(canvas);
//window.open(img);
}
});
});
<div id="screenshot"></div>
.filt_opt_n this is a div which u want to show the output this is working for me
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
