在 PHP 网页上显示图像而不是使用 PhantomJS 下载

Question

我正在尝试截取 Web URL 的一些屏幕截图，因此为此目的，我搜索了 Google 上的所有内容（最多 10 页），但没有找到任何可以让我头脑清醒的东西，所以最后在这里寻求帮助。

为了更好地截取我的 URL，在搜索了许多插件、APIs 和代码之后，我发现 PhantomJS 非常可靠，并被许多开发人员推荐。最后，我创建了我的脚本来使用 Windows 10 捕获下面的屏幕截图，稍后 Wamp Local Server 将在基于 Linux 的共享网络托管服务器上托管我的脚本。

1.) 首先我从 https://phantomjs.org/ 下载了 PhantomJS for Windows (.exe) 文件并将其保存在 D:\Wamp_Server_64\www\MyProject\bin\phantomjs.exe 文件夹中。

2.) 创建了一些下面的文件作为基础。

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 文件后，我在 [=42] 的同一文件夹中下载了文件 google.jpg =]capture.php.

问题：

现在我有一些相互关联的问题，需要下面分享的建议。

首先主要的问题是我想在 capture.php 页面上显示屏幕截图而不是下载。
其次是它生成的图像太重，所以我想降低其缩略图的质量。
第三个问题是我想让它像 API 一样 http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXX 然后我应该能够在 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 and also https://github.com/microweber/screen/tree/master/demo但没能搞定）
第四个是浏览器 favicon 保持动画花费了太多时间，我想稍后在我的通用共享 Linux 网站服务器上托管它，所以我怎样才能加快它的加载时间并想要显示一般加载图像，直到它生成缩略图。

我知道我问的太多了，但我坚持这些步骤。休息我从谷歌搜索中得到了所有。 :) #HappyCoding

Answer 1

您需要 HTML 才能显示图像。 PHP只做处理。尝试在 HTML

上渲染图像

Answer 2

最后，我通过在 https://phantomjs.org/api/webpage/method/render-base64.html 处使用 PhantomJS - renderBase64() 函数从 PhantomJS 得到了答案。在楼上link的帮助下，我在这里更新我的代码以获得完美的答案。

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/

生成

在 PHP 网页上显示图像而不是使用 PhantomJS 下载

Display Image On PHP WebPage Instead Of Downloading Using PhantomJS

javascript

php

image

bin

phantomjs

问题：