您的位置：首页 > Web前端 > HTML

html2canvas 网页截图下载上传

2015-09-10 16:02 706 查看

利用html2canvas插件对网页截图并下载和上传图片。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--此网页演示了html2canvas网页截图下载 -->

<head>
<!-- base.js实际上是jquery库,html2canvas.js是html2canvas自带的js库 -->
<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>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--需要注意的是,这里一定要等待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' ) ;
//$('#down_button').css('display','inline-block');
var html_canvas = canvas.toDataURL();
$.post('', {order_id:1,type_id:2,html_canvas:html_canvas}, function(json){
}, 'json');
}
});
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
<div id="canv">
此网页演示了html2canvas截图后将截图后的网页追加到了原网页之上
<br>
<br> 这里可以看作是边界线
<hr/>
</div>
<a type="button" id="down_button">下载</a>
<?php
if(isset($_POST['html_canvas'])){
$order_id = $_POST['order_id'];
$type_id = $_POST['type_id'];
$html_canvas = $_POST['html_canvas'];
$image = base64_decode(substr($html_canvas, 22));
header('Content-Type: image/png');
$filename =  $order_id.'-'.$type_id.".png";
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}

?>
</body>

</html>

http://blog.163.com/yangyan6032@126/blog/static/1218798372014112225122898/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

html2canvas 网页截图 下载 上传

html2canvas 网页截图下载上传