how to capture screenshot in html using js or jquery

Question

I'm need my clients be able to capture screenshot of any page of my website using button like this:

<button>Take screenshot</button>

I tried to use html2canvas but it's doesn't work properly for me because i have iframe's in my website and it's cause some session problems.

someone have solution for this?

i looked all over google and didn't found something that's helps me much.

Answer 1

Look at the html2canvas project. Their approach is that they create a representation of the page inside a canvas. They don't make an actual screenshot, but builds it based on the content on the page and the loaded stylesheet. It could be used on the entire body or just a specific element.

It is also really easy to use. Here is an example:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
}); 

You can adapt it to your code relatively easy.

Take a look at their demo. Click on any of the buttons and then scroll to the bottom of the page.

---