Home >Backend Development >PHP Tutorial >Generate web page snapshots in image format based on linnux phantomjs, _PHP tutorial
Generate web page snapshots in image format based on linnux phantomjs, _PHP tutorial
- WBOYOriginal
- 2016-07-13 09:57:02856browse
Based on linnux phantomjs to generate web page snapshots in image format,
Install the extension:
(1) The following is my installation process on linux. If git is not installed, please first yum install git
Install casperjs
Copy code The code is as follows:
cd /
git clone git://github.com/n1k0/casperjs.git
cd casperjs
ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs //Can be ignored. In actual execution, php is executed /casperjs/bin/casperjs
(2) Install phantomjs, download address: http://phantomjs.org/download.html
After downloading, the operation is very simple. Just move the decompressed binphantomjs to usrlocalbinphantomjs.
can test phantomjs --version and the results will show no errors, indicating that the installation is OK
(3)Install fonts
1. First get a set of "Microsoft Yahei" font library (Google a lot), including two files msyh.ttf (normal), msyhbd.ttf (bold);
2. Create a subdirectory under the /usr/share/fonts directory, such as win, and the command is as follows:
Copy code The code is as follows:
# mkdir /usr/share/fonts/win
3. Copy msyh.ttf and msyhbd.ttf to this directory. For example, place these two files under /root/Desktop. Use the command:
Copy code The code is as follows:
# cd /root/Desktop
# cp msyh.ttf msyhbd.ttf /usr/share/fonts/win/
4. Create font index information and update font cache:
Copy code The code is as follows:
# cd /usr/share/fonts/win
# mkfontscale (If it prompts mkfontscale: command not found, you need to install it yourself # yum install mkfontscale)
# mkfontdir
# fc-cache (if fc-cache: command not found is prompted, you need to install # yum install fontconfig)
At this point, the font has been installed!
<?php
if (isset($_GET['url']))
{
set_time_limit(0);
$url = trim($_GET['url']);
$filePath = md5($url).'.png';
if (is_file($filePath))
{
exit($filePath);
}
//如果不加这句就会报错“Fatal: [Errno 2] No such file or directory; did you install phantomjs?”,详情参考http://mengkang.net/87.html
putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
$command = "phantomjs phantomjs.js {$url} {$filePath}";
@exec($command);
exit($filePath);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>快照生成</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
* {margin: 0; padding: 0; } form {padding: 20px; } div {margin: 20px 0 0; } input {width: 200px; padding: 4px 2px; } #placeholder {display: none; }
</style>
</head>
<body>
<form action="" id="form">
<input type="text" id="url" />
<button type="submit">生成快照</button>
<div>
<img src="" alt="" id="placeholder" />
</div>
</form>
<script>
$(function(){
$('#form').submit(function(){
if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
{
alert('正在生成网站快照，请耐心等待...');
return false;
}
$(this).data('generate', true);
$('button').text('正在生成快照...').attr('disabled', true);
$.ajax({
type: 'GET',
url: '?',
data: 'url=' + $('#url').val(),
success: function(data){
$('#placeholder').attr('src', data).show();
$('#form').data('generate', false);
$('button').text('生成快照').attr('disabled', false);
}
});
return false;
});
});
</script>
</body>
</html>
var page = require('webpage').create();
var args = require('system').args;
var url = args[1];
var filename = args[2];
page.open(url, function () {
page.render(filename);
phantom.exit();
});
The above is the entire content of this article, I hope you all like it.