网页div转换成图片导出——html2canvas
2016-02-25 20:51
525 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <!--此网页演示了html2canvas网页截图下载 --> <head> <!-- jquery库和html2canvas库 --> <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> <!--需要注意的是,这里一定要等待js库和网页加载完毕后再执行函数 --> <!-- html2canvas()中,第一个参数是要截图的Dom对象,第二个参数时渲染完成后回调的canvas对象。 --> <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转换成图片并下载。
实际操作中以上代码只能转换显示器分辨率大小的网页图片,对于高度超过屏幕分辨率高度的网页不能全部导出。
经过测试,在第二个参数中加入高度即可将指定高度的网页导出为图片,代码如下:
function print(){
html2canvas( $("#canv") ,{
onrendered: function(canvas){
$('#down_button').attr( 'href' , canvas.toDataURL() ) ;
$('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
},
height:9000
});
}
相关文章推荐
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 使用canvas实现仿新浪微博头像截取上传功能
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- js+canvas绘制矩形的方法
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+canvas实现的球体平抛及颜色动态变换效果
- html5 canvas js(数字时钟)实例代码
- JavaScript+canvas实现七色板效果实例
- javascript+canvas制作九宫格小程序
- 通过javascript把图片转化为字符画
- js+html5通过canvas指定开始和结束点绘制线条的方法
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
- JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
- 基于canvas实现的绚丽圆圈效果完整实例
- PHP实现将HTML5中Canvas图像保存到服务器的方法
- 基于canvas实现的钟摆效果完整实例
- js+html5实现canvas绘制简单矩形的方法
- javascript基于HTML5 canvas制作画箭头组件
- JavaScript html5 canvas画布中删除一个块区域的方法