All geek questions in one place

Take a screenshot of <body> with html2canvas and save img as JS var

I am trying to allow users on my site to click a button to take a screenshot of the current screen (all in the body).

From my research, html2canvas seems like a resource that makes this possible.

My problem is that the documentation does not contain sample code, and I'm struggling to figure out how to do this.

http://html2canvas.hertzen.com/documentation.html

The next SO question ( How to upload a screenshot using html2canvas? ) Leaves me a little confused. I just want to know how to get the image at the moment.

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. Do not worry by sending it to the server later.

Any information is appreciated. Thank you (html2canvas even needed?)

+6
source share
3 answers

Since you are using the html2canvas jQuery plugin, here is an example snippet

 var screenshot; $('body').html2canvas({ onrendered: function(canvas) { screenshot = canvas.toDataURL(); //code to process/send the image to server } });

In the above code snippet, html2canvas creates a screenshot of the page.

You can also use PhantomJS to take screenshots of web pages - provided that they are publicly accessible pages, since you will not be able to access pages with server-side login protection; in such situations, only a client solution such as html2canvas will work.

+4
source 
 $("#screenshot").click(function() { $("body").html2canvas({ onrendered: function( canvas ) { $(".filt_opt_n").html(canvas); //window.open(img); } }); }); <div id="screenshot"></div>

.filt_opt_n is a div that wants to show a result that works for me

+1
source

Maybe an old question. You can try it!

 var htmlCanvas = new html2canvas(document.body); var queue = htmlCanvas.parse(); var canvas = htmlCanvas.render(queue, { elements: { length: 1} }); var img = canvas.toDataURL();
0
source

Source: https://habr.com/ru/post/914652/

More articles:


All Articles