We are going to take a screenshot from our current page by html5 canvas. So why we are waiting for. Let's start
1. At first we have to create our current page. Crate index.html page and copy the below stuff and paste it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Take screenshot by html5 canvas</title>
</head>
<body>
<p>This is a simple page. which we'll take a screenshot from it.</p>
</body>
</html>
2. You have to download html2canvas.js file and include it into your head section
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Take screenshot by html5 canvas</title>
<script type="text/javascript" src="html2canvas.js"></script>
</head>
<body>
<p>This is a simple page. which we'll take a screenshot from it.</p>
</body>
</html>
3. and finally add the below script.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Take screenshot by html5 canvas</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.body, {
onrendered: function(canvas) {
var imgString = canvas.toDataURL("image/png");
window.open(imgString);
}
});
</script>
</head>
<body>
<p>This is a simple page. which we'll take a screenshot from it.</p>
</body>
</html>
Now you are free to browse and enjoy.
1. At first we have to create our current page. Crate index.html page and copy the below stuff and paste it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Take screenshot by html5 canvas</title>
</head>
<body>
<p>This is a simple page. which we'll take a screenshot from it.</p>
</body>
</html>
2. You have to download html2canvas.js file and include it into your head section
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Take screenshot by html5 canvas</title>
<script type="text/javascript" src="html2canvas.js"></script>
</head>
<body>
<p>This is a simple page. which we'll take a screenshot from it.</p>
</body>
</html>
3. and finally add the below script.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Take screenshot by html5 canvas</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.body, {
onrendered: function(canvas) {
var imgString = canvas.toDataURL("image/png");
window.open(imgString);
}
});
</script>
</head>
<body>
<p>This is a simple page. which we'll take a screenshot from it.</p>
</body>
</html>
Now you are free to browse and enjoy.
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন