在PHP网页上显示图像，而不是使用PhantomJS下载 [英] Display Image On PHP WebPage Instead Of Downloading Using PhantomJS
问题描述
我正试图捕获一些Web URL的屏幕截图，因此，为此，我在Google上搜索了多达10页的所有内容，但没有发现任何可以清除的思路，因此终于在这里寻求帮助.
I am trying to capture some screenshot of Web URLs so for this purpose, I searched everything on Google up to 10 pages and found nothing to clear my mind so finally asking for help here.
在搜索了许多插件，API和代码后，为了获得更好的URL截图，我发现 PhantomJS 非常可靠，并为许多开发人员所推荐.最后，我创建了脚本以使用Windows 10捕获下面的屏幕快照，Wamp Local Server稍后将在基于Linux的共享Web托管服务器上托管我的脚本.
To have a better screenshot of my URLs, after searching many plugins, APIs, and codes, I found PhantomJS much reliable and recommended by many developers. Finally, I created my script to capture the screenshot below using Windows 10 and Wamp Local Server later will host my script on Linux based shared web hosting server.
1.)首先，我从 https://phantomjs.org下载了 PhantomJS . / (用于Windows(.exe)文件)并将其保存在D:\Wamp_Server_64\www\MyProject\bin\phantomjs.exe文件夹中.
1.) First I downloaded the PhantomJS from https://phantomjs.org/ for Windows (.exe) file and saved it in D:\Wamp_Server_64\www\MyProject\bin\phantomjs.exe folder.
2.)创建了一些下面的文件作为基础.
2.) Created some below files as basics.
PHP文件(capture.php):
<?php
$response = exec('D:\Wamp_Server_64\www\MyProject\bin\phantomjs D:\Wamp_Server_64\www\MyProject\js\screenshot.js http://www.google.com google.jpg');
?>
JS文件(screenshot.js):
var system = require('system');
// Web Address (URL) of the page to capture
var url = system.args[1];
// File name of the captured image
var file = system.args[2];
var page = require('webpage').create();
// Browser size - height and width in pixels
// Change the viewport to 480x320 to emulate the iPhone
page.viewportSize = { width: 1200, height : 800 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1200, height: 600 };
// Set the User Agent String
// You can change it to iPad or Android for mobile screenshots
page.settings.userAgent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5";
// Render the screenshot image
page.open ( url, function ( status ) {
if ( status !== "success") {
console.log("Could not open web page : " + url);
phantom.exit();
} else {
window.setTimeout ( function() {
page.render(file);
console.log("Download the screenshot : " + file);
phantom.exit();
}, 1000);
}
});
3.)现在，通过http://localhost/MyProject/capture.php在浏览器中运行capture.php文件之后，我将文件google.jpg下载到了 capture.php 的同一文件夹中.
3.) Now after running the capture.php file in the browser via http://localhost/MyProject/capture.php, I got the file google.jpg downloaded in the same folder of capture.php.
现在我遇到了一些彼此相关的问题，需要下面分享的建议.
Now I have some problems related to each other and need suggestions as shared below.
- 首先，主要问题是我想在
capture.php页面上显示屏幕截图而不是下载. - 第二个原因是它生成的图像太重，因此我想降低其缩略图的质量.
- 第三个问题是，我想使它像
http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXX这样的API，然后应该可以在 MyProject 中的任何地方以<img src="http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXX"/>的形式使用它. (注意:为此，我尝试研究 https://github.com/jonnnnyw/php-phantomjs 以及 https://github.com/microweber/screen/tree/master/demo ，但无法获取) - 第四，浏览器网站图标保持动画状态需要花费太多时间，我想稍后将其托管在基于Linux的通用共享网站服务器上，以便如何快速加载它并显示一般的加载图像，直到它会生成一个缩略图.
- First the main problem is that I want to display the screenshot on
capture.phppage instead of downloading. - Second is that it is generating too heavy images so I want to decrease its quality of thumbnail.
- Third problem is that I want to make it like API something as
http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXXand then I should be able to use it as<img src="http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXX"/>anywhere in MyProject. (Note: For this purpose, I tried to study https://github.com/jonnnnyw/php-phantomjs and also https://github.com/microweber/screen/tree/master/demo but not able to get it) - Fourth is that it is taking too much time with browser favicon keeps animating, I want to host it later on my general shared Linux based website server so how can I make its loading time fast and want to display a general loading image until it generates a thumbnail.
我知道我问的太多了，但我坚持执行这些步骤.休息，我从谷歌搜索中得到了全部. :) #HappyCoding
I know I asked too much but I am stuck on these steps. Rest I got all from Googling. :) #HappyCoding
推荐答案
最后，我使用
Finally, I got the answer from PhantomJS by using PhantomJS - renderBase64() function at https://phantomjs.org/api/webpage/method/render-base64.html. With the help of the upper link, here I am updating my code for the perfect answer.
PHP文件(capture.php):
<?php
$response = exec('D:\Wamp_Server_64\www\MyProject\bin\phantomjs D:\Wamp_Server_64\www\MyProject\js\screenshot.js http://www.google.com');
echo '<img src="data:image/png;base64,'.$response.'" alt="Screenshot" />';
?>
JS文件(screenshot.js):
var system = require('system');
// Web Address (URL) of the page to capture
var url = system.args[1];
var page = require('webpage').create();
// Browser size - height and width in pixels
// Change the viewport to 480x320 to emulate the iPhone
page.viewportSize = { width: 1200, height : 800 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1200, height: 600 };
// Set the User Agent String
// You can change it to iPad or Android for mobile screenshots
page.settings.userAgent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5";
// Render the screenshot image
page.open ( url, function ( status ) {
if ( status !== "success") {
console.log("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");
phantom.exit();
} else {
window.setTimeout ( function() {
var base64 = page.renderBase64('JPEG');
console.log(base64);
phantom.exit();
}, 1000);
}
});
注意:如果无法捕获您的屏幕截图，长console.log("iVBORw0KGgo........... base64长代码是默认的空白图片代码，可以作为后备广告.您可以添加自己的默认小尺寸图像base64代码，该代码可从 http://www.base64thumbnail.com/
Note: The long console.log("iVBORw0KGgo........... base64 code is a default empty image code for fallback if it is not able to take your screenshot. You can add your own default small size image base64 code that you can generate from http://www.base64thumbnail.com/
这篇关于在PHP网页上显示图像，而不是使用PhantomJS下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
