html2canvas example

how to use html2canvas

by Manigandan Karthikeyan

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.3/html2canvas.js"></script>
<script src="highcharts"></script>
<a href="javascript:genScreenshot()"> Get Screenshot</a>
<a id="test"></a>
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in enim metus. Mauris lobortis non sem eu porta. Etiam ante lacus, viverra euismod neque ut, pretium volutpat lacus. Aenean ipsum elit, feugiat quis metus vitae, vehicula sodales arcu. Suspendisse id neque vitae erat pellentesque viverra in in eros. Nam sagittis vitae enim ut laoreet. Aliquam erat volutpat. Etiam rhoncus, elit id efficitur convallis, mi nisl blandit ipsum, sed scelerisque odio elit vel est. Nunc velit urna, dignissim at varius non, luctus vel libero. Fusce cursus pharetra laoreet. Curabitur placerat neque sed justo fringilla, sit amet semper dui accumsan. Nam posuere quam sit amet nunc porttitor consequat. Nulla facilisi. Quisque viverra massa eget dolor finibus maximus. 
</div>
<br>
<div id="box1" style="overflow: auto">
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in enim metus. Mauris lobortis non sem eu porta. Etiam ante lacus, viverra euismod neque ut, pretium volutpat lacus. Aenean ipsum elit, feugiat quis metus vitae, vehicula sodales arcu. Suspendisse id neque vitae erat pellentesque viverra in in eros. Nam sagittis vitae enim ut laoreet. Aliquam erat volutpat. Etiam rhoncus, elit id efficitur convallis, mi nisl blandit ipsum, sed scelerisque odio elit vel est. Nunc velit urna, dignissim at varius non, luctus vel libero. Fusce cursus pharetra laoreet. Curabitur placerat neque sed justo fringilla, sit amet semper dui accumsan. Nam posuere quam sit amet nunc porttitor consequat. Nulla facilisi. Quisque viverra massa eget dolor finibus maximus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in enim metus. Mauris lobortis non sem eu porta. Etiam ante lacus, viverra euismod neque ut, pretium volutpat...

CSS

#box1 {
  width:400px;
  height:300px;
  border-style: solid;
  border-width: 2px;
}
canvas {
    max-width: 100%;
    max-height: 100%;
}

JavaScript

html2canvas(document.body, {
	allowTaint: true
}).then(function (canvas) {
  document.body.appendChild(canvas);
});