网页div转换成图片导出—

[html] view plaincopy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="http://www.boolaw.com/tpl/default/js/jquery-1.8.3.min.js"></script>
<title>html2canvas网页截图</title>
<script type="text/javascript">
$(function(){
print();
});
function print(){
html2canvas( $("#canv") ,{
onrendered: function(canvas){
$('#down_button').attr( 'href' , canvas.toDataURL() ) ;
$('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
}
});
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="canv">
Cease to struggle and you cease to live.<br/>
</div>
<a type="button" id="down_button">download</a>
</body>
</html>

以上为html2canvas的一个小demo，可以将id为canv的div转换成图片并下载。

实际操作中以上代码只能转换显示器分辨率大小的网页图片，对于高度超过屏幕分辨率高度的网页不能全部导出。

经过测试，在第二个参数中加入高度即可将指定高度的网页导出为图片，代码如下：

[html] view plaincopy

function print(){
html2canvas( $("#canv") ,{
onrendered: function(canvas){
$('#down_button').attr( 'href' , canvas.toDataURL() ) ;
$('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
},
height:9000
});
}

网页div转换成图片导出——html2canvas相关推荐

JavaScript实现React实现网页转换成图片截屏下载
最近有项目的需求需要把网站内HTML内容转换成图片保存下载,找了一圈发现一个不错的插件HTML-to-image,npm 包地址:Html-to-image NPM | npm.io,该插件的原理是: ...
html2canvas将html代码生成canvas转换成图片，并且保存到本地
html2canvas将html代码生成canvas转换成图片,并且保存到本地 html2canvas 将html转换成canvas展示 convertCanvasToImage 从canvas提取为 ...
PDF文件如何导出成图片，PDF如何转换成图片
现在的pdf应用得很广泛,由于它可以不依赖操作系统的语言和字体及显示设备,阅读起来很方便.我们在工作中几乎每天都会使用到PDF文件,有时候我们需要将PDF文件导出成图片格式的文件,这样更方便我们使用. ...
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法--canvas.dom-to-image.html2canvas canvas绘制网络图片报错(跨域) 使用canvas将html页面转成图片 dom-to-imag ...
支持导出PDF文件并转换成图片格式的PDF查看控件Spire.PDFViewer
Spire.PDFViewer for .NET是一款功能强大的PDF查看控件.它是由e-iceblue公司在2012年新推出的一款产品.它允许开发者从本地文件夹(File),stream和byte ...
批量将网页转换成图片或PDF文档技巧分享
工作中我们有时要将一些批量的网页转换成图片或者PDF文档格式,虽然多数浏览器具有滚动截屏或者打印输出PDF文档功能,但是如果有几十上百张网页需要处理,那也是要人命的.所以我一直想找一款能够批量处理该工 ...
使用html2canvas,将页面转换成图片的采坑记录(Web/Taro h5)
使用html2canvas将页面转换成图片的采坑记录 "html2canvas": "^1.4.1","@tarojs/taro": &qu ...
vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地
在做让用户在页面签名并把当前页面保存为图片,附上完整代码 (直接复制代码,更改接口地址或删除接口逻辑可直接复用) **准备工作:安装 npm install vue-esign --save 全局 ...
js实现HTML转换成图片
1.首先利用html2canvas把html转换成canvas html2canvas($('#content'),{onrendered: function(canvas) {document.bo ...

网页div转换成图片导出——html2canvas

网页div转换成图片导出——html2canvas相关推荐

最新文章

热门文章