<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script >
$(document).ready(function(){
//alert();
$("button").click(function(){
html2canvas(document.body, {
onrendered: function(canvas) {
//in case of @document.body you can select any element to make Img
var canImg=canvas.toDataURL("image/jpg");
// alert(canImg);
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(36, 24, "http://plateofcode.blogspot.in/");
doc.addImage(canvas, 'JPEG', 15, 40, 180, 180);
doc.save("a.pdf");
}
});
});
});
</script>
</head>
<body>
Fork me on GitHub
cdnjsRequest a libChatNetworkUptimeIssuesgit_statsgitstatsAboutBrowse Libraries
html2canvas
http://html2canvas.hertzen.com/
Links/Tags: cdnjs api git autoupdate enabled repository MIT license
Screenshots with JavaScript
canvas, screenshot, html5
<button >download</button>
</body>
</html>
Very nice article, just what I wanted to find.
ReplyDelete