Friday, August 16, 2013

Web page screenshot with Javascript, based on html2canvas

Last week I had to do some screenshots in javascript. I don't really know javascript, so I went with Google. It really can't be that hard... After an hour of copy-pasting non-working examples, I finally managed to come up with the following, that actually works in Firefox and Chrome, and it should work in Explorer 9 or newer.

Note: this is not my original work, just the result of an hour of Google. Most parts from html2canvas.

Full page html:

<html>
<head>
<title>
ScreenShot
</title></head>
<body>

<script language="javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script language="javascript">
function ScreenShot() {

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

}
</script>

<input onclick="ScreenShot();" type="submit" value="ScreenShot" />
</body>
</html>



The important stuff (that worked in a Moodle HTML block):

<script language="javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script language="javascript">
function ScreenShot() {

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

}
</script>

<input onclick="ScreenShot();" type="submit" value="ScreenShot" />