How to use html2canvas?

Question

I would like to use html2canvas but it is not clear enough how to use it in the documentation. What libraries I should include ? and then is this peace of code just what I need ? What about the proxy ? and How I could save the screen shot after it's taken ?

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

score 3 · Answer 1 · answered Oct 19 '12 at 09:04

3

For me, it was working this way:

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

answered Oct 19 '12 at 09:04

Niklas Hoesl

320
3
8

score 0 · Answer 2 · answered Jul 30 '13 at 09:28

0

The current latest version works this way:

html2canvas($('#map'),
 {
  onrendered: function(canvas) {
    cvs = canvas.toDataURL('image/png');
    window.open(cvs)
 }
});

answered Jul 30 '13 at 09:28

roxxypoxxy

2,973
1
21
28

score 0 · Answer 3 · answered Jul 28 '22 at 02:48

Here's a minimal, complete example that shows how to convert the DOM to canvas with html2canvas, convert the canvas to base64, and finally trigger a download.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
  <h1>Hello World</h1>
<script>
(async () => {
  const canvas = await html2canvas(document.body);
  const base64 = canvas.toDataURL();
  const a = document.createElement("a");
  a.href = base64;
  a.download = "html2canvas-test.png";
  a.click();
})();
</script>
</body>
</html>

I'm not sure what you mean about a proxy.

How to use html2canvas?

3 Answers3