187 lines
7.9 KiB
PHP
Executable File
187 lines
7.9 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Christian Haschek">
|
|
|
|
<!-- Open Graph data -->
|
|
<meta property="og:title" content="HTTP2PIC | Website screenshot API" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="<?=URL?>" />
|
|
<meta property="og:image" content="<?=URL?>/api.php?url=<?php echo rawurlencode(URL); ?>&cache=1&viewport=1200x630"/>
|
|
<meta property="og:description" content="An open source website renderer" />
|
|
<meta property="og:site_name" content="http2pic" />
|
|
<meta property="article:published_time" content="2015-09-28 00:14:58" />
|
|
<meta property="article:modified_time" content="2015-09-28 22:08:16" />
|
|
<meta property="article:tag" content="selfhosted,opensource,screenshot" />
|
|
|
|
|
|
<title>http2pic</title>
|
|
|
|
<!-- Bootstrap Core CSS -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link href="css/clean-blog.min.css" rel="stylesheet">
|
|
<link href="css/http2pic.css" rel="stylesheet">
|
|
|
|
<!-- Custom Fonts -->
|
|
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
|
<link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
|
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a href="https://github.com/chrisiaut/http2pic"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
|
|
|
<!-- Page Header -->
|
|
<!-- Set your background image for this header on the line below. -->
|
|
<header id="intro-header" class="intro-header" style="background-image: url('/img/home-bg.jpg')">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
|
<div class="site-heading">
|
|
<h1 style="text-shadow: 0px 0px 12px #000000;">http2pic</h1>
|
|
<h2 id="loading"><img src="img/loading.gif" /><br/>Loading..</h2>
|
|
<hr class="small">
|
|
<span style="text-shadow: 0px 0px 12px #000000;" class="subheading">Give it a try! <input id="showcase_url" type="url" placeholder="eg. http://xkcd.com" value="https://xkcd.com" />
|
|
<input id="showcase_button" type="button" value="GO" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<img id="preloader" src="" />
|
|
|
|
<!-- Main Content -->
|
|
<div class="container">
|
|
<h2>How the API works</h2>
|
|
<div class="well"><h2 ><?=URL?>/api/?url=<span style="color:#1e90ff">[WEBSITE_URL]</span>&<span style="color:#C73C49">[OPTIONS]</span></h2></div><hr/><br/>
|
|
<div >
|
|
<div>
|
|
<section>
|
|
<h2>Options</h2>
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>Values</th>
|
|
<th>Description</th>
|
|
<th>Example</th>
|
|
</tr>
|
|
<tr>
|
|
<td>url</td>
|
|
<td>http://..</td>
|
|
<td>The URL of the webpage you'd like to take a screenshot of. Make sure to encode the URL!</td>
|
|
<td>url=http://xkcd.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td>viewport</td>
|
|
<td>WIDTHxHEIGHT</td>
|
|
<td>Sets the size of the virtual screen rendering the page. Default: smart width, full height</td>
|
|
<td>viewport=1980x1080</td>
|
|
</tr>
|
|
<tr>
|
|
<td>js</td>
|
|
<td>true|false</td>
|
|
<td>Allows you to enable/disable JavaScript in the rendered Website. Default value: yes</td>
|
|
<td>js=false</td>
|
|
</tr>
|
|
<tr>
|
|
<td>fullpage</td>
|
|
<td>true|false</td>
|
|
<td>Capture the full page height instead of just the viewport. Useful for long pages and LLM analysis. Default: false</td>
|
|
<td>fullpage=true</td>
|
|
</tr>
|
|
<tr>
|
|
<td>maxheight</td>
|
|
<td>1–30000</td>
|
|
<td>Maximum pixel height when using fullpage=true. Default: 15000</td>
|
|
<td>maxheight=20000</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
<div class="6u">
|
|
<section>
|
|
<h1>Examples</h1>
|
|
|
|
<h3>Simple link via img tag</h3>
|
|
<p class="margin-bottom"></p>
|
|
<p>
|
|
<pre><code class="php">
|
|
<?php
|
|
$url = 'http://www.xkcd.com';
|
|
$query = 'viewport=1200x330&url='.rawurlencode($url);
|
|
$img="<?=URL?>/api/?$query";
|
|
|
|
echo "<img src='$img' />";
|
|
</code></pre>
|
|
</p>
|
|
|
|
|
|
<h3>Proxy script to download the image via curl</h3>
|
|
<p class="margin-bottom"></p>
|
|
<p>
|
|
<pre><code class="php">
|
|
<?php
|
|
$targeturl = 'http://www.xkcd.com';
|
|
$url = '<?=URL?>/api/?url='.rawurlencode($targeturl);
|
|
|
|
$ch = curl_init($url);
|
|
$fp = fopen('xkcd.jpg', 'wb');
|
|
curl_setopt($ch, CURLOPT_FILE, $fp);
|
|
curl_setopt($ch, CURLOPT_HEADER, 0);
|
|
curl_exec($ch);
|
|
curl_close($ch);
|
|
fclose($fp);
|
|
</code></pre>
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
|
|
<p class="copyright text-muted">Copyright © Haschek Solutions <br/><a href="https://www.haschek-solutions.com"><img src="img/hs_logo.png" /></a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery.js"></script>
|
|
|
|
<!-- Bootstrap Core JavaScript -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
|
<!-- Custom Theme JavaScript -->
|
|
<script src="js/clean-blog.min.js"></script>
|
|
<script src="js/http2pic.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|