create screenshot of webpage using html2canvas (unable to initialize properly)

Question

I am attempting to use http://html2canvas.hertzen.com/ to take screenshots of my webpage. I am unable to initialize a canvas element using...

var canvas = $('body').html2canvas();

If I were able to get a proper canvas I would follow with something like

var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl);             // display image

Unfortunately, the documentations is very limited IMO. http://html2canvas.hertzen.com/documentation.html . I do not believe I need to preload as I am not using any dynamic graphics(but am not even getting that far anyways)

I am simply too noob to understand if this guy is having success with screen capturing using html2canvas

I don't seem to be getting any farther than this fellow.. How to upload a screenshot using html2canvas?

My ideal solution would demonstrate how to create screenshot with minimal code. (Copy html to canvas. get toDataURL string. output string)

ANY insight is GREATLY appreciated =)

Slavik Meltser · Accepted Answer · 2017-10-31T21:04:47.343

19

You should use it this way:

$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
window.open(img);

It took me few hours to figure it out, how to use it the right way. The {elements:{length:1}} is required, due to incomplete implementation of the plugin, otherwise you'll get an error.

Good luck!

edited Oct 31 '17 at 21:04

answered May 09 '12 at 23:46

Slavik Meltser

9,712
3
47
48

1

i am trying to grab a div like "$("#myDiv").html2canvas();" but i keep getting the whole screen. how can i fix this? – t q May 28 '12 at 02:11
The position and the size of the element must be defined – Slavik Meltser Jan 27 '13 at 17:00
and how do you define that ? – SuN Feb 14 '13 at 17:13
something like this `
` – Slavik Meltser May 22 '13 at 15:41

Aley · Answer 2 · 2013-04-25T17:15:27.447

12

You could also use the following:

var html2obj = html2canvas($('body'));

var queue  = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();

window.open(img);

edited Apr 25 '13 at 17:15

answered Aug 30 '12 at 11:50

Aley

8,540
7
43
56

how to get screenshot particular div content – srini Apr 25 '13 at 20:55
1

@srini use another selector instead of body like `var html2obj = html2canvas($('#any'));` – Aley Apr 26 '13 at 00:28
6

I got this Error: html2obj.parse is not a function – tuananh Dec 03 '16 at 04:08

score 9 · Answer 3 · answered Oct 19 '12 at 09:08

9

To just get a part of the page you can use it this way:

$('#map').html2canvas({
onrendered: function( canvas ) {
  var img = canvas.toDataURL()
  window.open(img);
}

answered Oct 19 '12 at 09:08

Niklas Hoesl

320
3
8

In this scenario how would you pass in the options? (ie if you wanted to turn on logging or adjust the timeout. – John Doe Nov 25 '15 at 19:42

score 8 · Answer 4 · answered Apr 10 '13 at 15:58

This is what worked for me.

html2canvas(document.body, {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

This created a new window for the screenshot.

I only wanted a portion of my page in the screenshot, specifically a container div. So I did the following:

html2canvas($('#myDiv'), {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

For people looking up the same question, if the above options don't help, hopefully this will.

score 1 · Answer 5 · answered Oct 18 '16 at 06:03

You can use the following code to capture a screenshot and download the screenshot.

html button creation

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button>
<a id="test"></a>
<div id="box1"></div>

function definition

<script type="text/javascript">                         
function genScreenshot() {
html2canvas(document.body, {
  onrendered: function(canvas) {
  $('#box1').html("");

  if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                navigator.userAgent.match(/Trident.*rv\:11\./)) 
        {
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob,'Test file.png');
  }
  else {
    $('#test').attr('href', canvas.toDataURL("image/png"));
    $('#test').attr('download','screenshot.png');
    $('#test')[0].click();
  }


  }
});
}  
</script>

note: I have created a html button where I have called the function. test is an attribute and box1 is to get the canvas elements.

vijay chaudhary · Answer 6 · 2023-01-06T06:32:03.817

0

I have try this way and it working fine for me, you can try this one also. https://github.com/vijayowork/screenshot-of-div-using-javascript.

I using domtoimage method.

edited Jan 06 '23 at 06:32

answered Jan 06 '23 at 06:30

vijay chaudhary

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 06 '23 at 12:00
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/33571921) – Vojin Purić Jan 07 '23 at 20:45

create screenshot of webpage using html2canvas (unable to initialize properly)

6 Answers6

Linked