已被阅读 1236 次 | 文章分类:javascript | 2018-06-20 11:17
Html2Canvas是一个可以将网页内容输出为图片的开源库,使用它可以方便的输出html为图片;能够实现在用户浏览器端直接对整个或部分页面进行截屏。
一:实现原理
1.实现保存为图片的第一步,将html转为canvas;只需要简单的调用html2canvas(element[, options]);即可。下列html2canvas方法会返回一个包含有canvas元素的promise:
html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);})
2.实现保存为图片的第二步:canvas转image;上一步生成的canvas即为包含目标元素的
image.src = canvas.toDataURL("image/png", 0.1)
二:代码实例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="html2canvas.js"></script>
</head>
<body>
<div id="printDIV" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
<input type="button" id="output" value="打印">
<h1>在下面将黄色背景的DIV打印成图片格式输出</h1>
<script>
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png", 0.1);
return image;
}
function convertHtml2Canvas() {
html2canvas(document.getElementById("printDIV"), {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
var img = convertCanvasToImage(canvas);
document.body.appendChild(img);
}).catch(function(e) {
console.error('error', e);
});
}
document.getElementById("output").onclick=function(){
convertHtml2Canvas();
}
</script>
</body>
三:效果
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号