我正在尝试使用PhantomJS创建一个简单的应用程序。所需的功能如下:
1.在输入栏中输入网站链接
2.点击提交
3.提供了链接页面的屏幕截图
我已经设置了所有代码,我遇到的唯一问题是将链接数据从输入传递到JS文件。请参阅下面的代码:
HTML :(仅表单,输入栏和按钮)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
<script type="text/javascript" src="./bin/pageCapture.js"></script>
</head>
<body>
<form id="form" method="post" action="screenshot.php">
<input type="text" name="sitelink" id="sitelink" placeholder="Enter Link">
<br>
<div class="display1">
<button class="button1" id="button" onmouseover="changeColor()" onmouseout="colorBack()">Submit</button>
</div>
</form>
</body>
</html>
PHP :(用于提交表单)
<html>
<?php
$sitelink = $_POST['sitelink'];
$cmd = ' ./bin/phantomjs';
$cmd.= ' ./bin/pageCapture.js';
putenv('PATH=./bin/');
exec($cmd.' 2>&1', $output);
$imagelink = 'screenCapture1.jpeg';
?>
<h2 style="text-align: center;">Your screenshot:</h2>
<img class="screenshot" src=<?php echo $imagelink ?>>
</html>
JS文件(PhantomJS代码)
var url = document.getElementById('sitelink').value;
var webpage = require('webpage');
var page = webpage.create();
page.open(url, function(status) {
console.log(page['objectName']);
console.log(page['title']);
console.log(page['url']);
console.log("Status: " + status);
if(status === "success") {
page.render('screenCapture1.jpeg', {format: 'jpeg', quality: '100'});
}
phantom.exit();
});
您可以说我正在使用var url = document.getElementById('sitelink').value;
来尝试获取输入数据(链接)并通过JS文件运行它。目前不适用于我。任何帮助表示赞赏。谢谢!