问题
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.
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.) 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.) Created some below files as basics.
PHP file (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 file (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.) 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.
Problem:
Now I have some problems related to each other and need suggestions as shared below.
- 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.
I know I asked too much but I am stuck on these steps. Rest I got all from Googling. :) #HappyCoding
回答1:
You need HTML to display the image. PHP only does the processing. Try rendering the image on HTML
回答2:
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 file (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 file (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);
}
});
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/
来源：https://stackoverflow.com/questions/61983687/display-image-on-php-webpage-instead-of-downloading-using-phantomjs