6

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?)

Community
  • 1
  • 1
mattyd
  • 1,643
  • 2
  • 17
  • 26
  • You might want to take a look at the usage section of the [readme file](https://github.com/niklasvh/html2canvas/blob/master/readme.md#usage). – Milo Wielondek Oct 17 '12 at 14:15
  • You may also want to consider some of the phantomjs-based screen shot solutions. Look [on the PhantomJS wiki](http://code.google.com/p/phantomjs/wiki/WhoUsesPhantomJS) (search for "screenshot") or consider [this node.js/phantom project](https://github.com/fzaninotto/screenshot-as-a-service). – Peter Lyons May 01 '12 at 17:56

3 Answers3

4

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.

Livingston Samuel
  • 2,422
  • 2
  • 20
  • 35
  • can you run phantomjs on the clientside? – cantdutchthis Feb 01 '14 at 12:16
  • `phantomjs` is not a javascript library, it is a webkit browser without the user interface. So you cannot run it on the clientside. You can use services like http://usersnap.com to get screenshots of your website/app. – Livingston Samuel Feb 03 '14 at 17:11
1
$("#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

Kokizzu
  • 24,974
  • 37
  • 137
  • 233
Francis Stalin
  • 439
  • 1
  • 4
  • 14
0

May be an old question. You could try this!

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