时间戳

首页 > 解决方案 > 在 PHP 网页上显示图像而不是使用 PhantomJS 下载

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

问题描述

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

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

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.) 现在capture.php通过 在浏览器中运行文件后http://localhost/MyProject/capture.php，我将文件下载到capture.phpgoogle.jpg的同一文件夹中。

问题：

现在我有一些彼此相关的问题，需要如下分享的建议。

  1. 首先主要问题是我想在capture.php页面上显示屏幕截图而不是下载。
  2. 其次是它生成的图像太重，所以我想降低它的缩略图质量。
  3. 第三个问题是我想让它像 API 一样http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXX，然后我应该能够<img src="http://localhost/MyProject/capture.php?URL=XXXXXX&Width=XXXXXX&Height=XXXXXX&FileName=XXXXXX&CropWidth=XXXXXX&CropHeight=XXXXXX"/>在MyProject的任何地方使用它。（注意：为此，我尝试研究https://github.com/jonnnnyw/php-phantomjs和https://github.com/microweber/screen/tree/master/demo但无法得到它）
  4. 第四是浏览器图标持续动画需要太多时间，我想稍后将它托管在我的通用共享基于 Linux 的网站服务器上，所以我怎样才能使其加载时间快速并希望显示一个通用加载图像，直到它生成一个缩略图。

我知道我问得太多了，但我被困在这些步骤上。休息我从谷歌上得到了所有。:) #快乐编码

标签： javascriptphpimagephantomjsbin

解决方案

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

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/生成这些代码

推荐阅读