<?php header("Content-Type:text/html; charset=UTF-8");
error_reporting(E_ALL & ~E_NOTICE);
$d = $_SERVER['QUERY_STRING'];?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>在线网页截图,在线网页截屏,在线截图,网站截图API - 站长社站长工具</title>
<meta name="keywords" content="在线网页截图,在线网页截屏,在线截图,在线截屏,网页截屏软件,给网站照相" />
<meta name="description" content="在线截图是站长社为广大站长网友提供网站截图服务，并提供网站截图API供开发者使用" />
<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<?php include('topnav.php');?>

<div class="container" style="margin-top: 68px;">
<?php include("main_header.php");?>
	<div class="row" style="margin-top: 28px;">
		<div class="col-md-9">
			<div class="panel panel-tianyu">
				<header class="panel-heading">
					<span class="glyphicon glyphicon-link"></span><strong>在线网页截图工具</strong>
				</header>
				<div class="panel-body">
					<div class="col-md-8" style="border-right: 3px solid #e5e5e5; padding-bottom: 28px;">
						<h3>请输入需要截图的网址</h3>
						<!--form action="?" method="get"-->
							<div class="input-group input-group-tianyu">
								<span class="input-group-addon">网址</span>
								<input id="dn" type="text" class="form-control" placeholder="输入网址" value="https://www.zzs1.com/" />
								<span class="input-group-btn">
									<button id="linkbtn" class="btn" >开始截图</button>
								</span>
							</div>
						<!--/form-->
					</div>
					<div class="col-md-4">
					
					</div>
					<div class="col-md-12" id="linkshow" style="<?php if(strlen($d)==0){echo 'display:none';} ?>">
						 <h3>正在访问链接开始截图</h3>
						 <div id="linklist" style="height: 438px; /*height: 888px;*/">
							<?php
							if(strlen($d)>3){
								echo "<iframe src='http://tu.zzs1.com/?url=".$d."&width=&height=&clipRect=%7B%22top%22%3A1%2C%22left%22%3A1%2C%22width%22%3A1024%2C%22height%22%3A666%7D&javascriptEnabled=true&loadImages=true&userAgent=&userName=&password=&callback=&delay' height='100%' width='100%' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>";
							}
							?>
						</div><!--con-->
					</div>
					<div class="col-md-12">
						 <h3>工具原理</h3>
						<p>本工具基于nodejs+PhantomJS搭建的在线截屏服务，截图API无限制，请放心使用。</p>
						<p>PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。</p>
					</div>
				</div>
			</div>
			<div class="panel panel-tianyu">
				<header class="panel-heading">
					<span class="glyphicon glyphicon-question-sign"></span>网站截图API（支持HTTPS）(www.zzs1.com替换成你的网址）
				</header>
				<div class="panel-body">
					<div class="col-md-12">
					<p>1.默认截图：宽度为1024px,高度全屏</p>
					<p>API：//tu.zzs1.com/?url=www.zzs1.com</p>
					<p>2.自定义截图：此功能等待修正</p>
					<p>API：//tu.zzs1.com/?url=www.zzs1.com&width=800&height=600</p>
					<p>3.关闭JS截图API</p>
					<p>API：//tu.zzs1.com/?url=www.zzs1.com&javascriptEnabled=false</p>
					<p>4.裁剪截图</p>
					<p>API：//tu.zzs1.com/?url=www.zzs1.com&clipRect=%7B"top"%3A14%2C"left"%3A3%2C"width"%3A400%2C"height"%3A300%7D</p>
					<p>定义：{"top":14,"left":3,"width":400,"height":300}从顶部14px左边3PX起开始裁剪400x300的图片</p>
					<p>5.加载时间截图</p>
					<p>API：//tu.zzs1.com/?url=www.zzs1.com&delay=1000</p>
					<p>定义：1000为1秒，意思是加载1秒钟后截图</p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="panel panel-tianyu">
				<header class="panel-heading">
					<span class="glyphicon glyphicon-wrench"></span>工具介绍
				</header>
				<div class="panel-body">
						<p>输入需要截屏的网址，然后按“截屏”按钮，稍等片刻，即可将您需要截屏的网页以图片格式截取下来。</p><p>　　关于API开发不懂得请到官方论坛提出问题，我们会一一解答。</p>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="panel panel-tianyu">
				<header class="panel-heading">
					<span class="glyphicon glyphicon-save"></span>下载源码
				</header>
				<div class="panel-body">
						<p>本工具源码提供下载</p>
						<a href="http://www.zzs1.com/code/" class="btn btn-tianyu" target="_blank"><span class="glyphicon glyphicon-save">下载地址</a>
				</div>
			</div>
		</div>
	</div>
</div>
<?php include('footer.php');?>
<script>
function cgurl(obj,url){
	obj.href=url;
}

function ck_dn(str)
{
        if(!/^([\w-]+\.)+((com)|(net)|(org)|(nz)|(gov\.cn)|(info)|(cc)|(me)|(asia)|(com\.cn)|(net\.cn)|(org\.cn)|(name)|(biz)|(tv)|(cn)|(la))$/.test(str)){
            return false;
        }else{
		    return true;	
		}

}
$(document).ready(function(){
	$("#linkbtn").click(function(){
			$domain = $("#dn").val();
			if($domain==""){
			   alert("请输入域名");
			}else if(ck_dn($domain)){
				$("#linkshow").show();
				$("#linklist").html("<iframe src='http://tu.zzs1.com/?url="+$domain+"&width=&height=&clipRect=%7B%22top%22%3A1%2C%22left%22%3A1%2C%22width%22%3A1024%2C%22height%22%3A666%7D&javascriptEnabled=true&loadImages=true&userAgent=&userName=&password=&callback=&delay' height='100%' width='100%' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>");
			}else{
				$("#linkshow").show();
				$("#linklist").html("<iframe src='http://tu.zzs1.com/?url="+$domain+"&width=&height=&clipRect=%7B%22top%22%3A1%2C%22left%22%3A1%2C%22width%22%3A1024%2C%22height%22%3A666%7D&javascriptEnabled=true&loadImages=true&userAgent=&userName=&password=&callback=&delay' height='100%' width='100%' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>");
			}
	});
});
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1361866808579755" charset="utf-8"></script>
</body>
</html>