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

Picayune

Answer 1

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!

Venusberg

i am trying to grab a div like "$("#myDiv").html2canvas();" but i keep getting the whole screen. how can i fix this? – Beset

The position and the size of the element must be defined – Venusberg

and how do you define that ? – Embowel

something like this <div style="width:300px;height:300px;"></div> – Venusberg

Answer 2

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

Lorient

how to get screenshot particular div content – Ruche

@Ruche use another selector instead of body like var html2obj = html2canvas($('#any')); – Lorient

I got this Error: html2obj.parse is not a function – Jukebox

Answer 3

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);
}

Dramatize

In this scenario how would you pass in the options? (ie if you wanted to turn on logging or adjust the timeout. – Tiebout

Answer 4

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.

Retrench

Answer 5

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.

Scourge

Answer 6

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.

Intuitivism

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. – Serotonin

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 – Conker