html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。
因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。
环境要求: jQuery
因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。
环境要求: jQuery
兼容性: Firefox 3.5+, Chrome, Opera, IE9
<html>
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript">
function printById(id) {
html2canvas(document.getElementById(id), {
allowTaint : true,
taintTest : false,
onrendered : function(canvas) {
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
/* document.body.appendChild(newImg); */
/* window.open(newImg.src); */
var printWindow = window.open(newImg.src);
// printWindow.document.write();
printWindow.document.write('<img src="'+newImg.src+'" />')
printWindow.print();
}
});
}
</script>
</head>
<body>
Hello!
<div class="" style="background-color: #abc;" id='myPrint'>
计算机天堂测试html5页面截图
<br>jsjtt.com
</div>
<textArea id="textArea" col="20" rows="10" ></textArea>
dddddd
<a href="javascript:void(0)" οnclick="printById('myPrint')">打印</a>
生成界面如下：
</body>
</html>
1747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
