SoFunction
Updated on 2025-03-02

Generate web page snapshots in image format based on linnux+phantomjs

Install the extension:
(1) The following is my installation process on Linux. If git is not installed, please yum install git first.
Install casperjs

Copy the codeThe code is as follows:

    cd /
    git clone git:///n1k0/
    cd casperjs
ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs //can be ignored In actual execution, php is executed /casperjs/bin/casperjs

 
(2) Install phantomjs, download address:/
The operation after downloading is very simple. Just move the decompressed \bin\phantomjs to \usr\local\bin\phantomjs. \
Test phantomjs --version There is no error when there is a result, it means that the installation is OK
 
(3) Install fonts
1. First, you can obtain a set of "Microsoft Yahei" font library (a bunch of Google) that contains two files (normal) and (bold);
2. Create a subdirectory in the /usr/share/fonts directory, such as win, the command is as follows:

Copy the codeThe code is as follows:

# mkdir /usr/share/fonts/win

3. Copy the sum to this directory, for example, place these two files under /root/Desktop, and use the command:

Copy the codeThe code is as follows:

 # cd /root/Desktop
 # cp   /usr/share/fonts/win/

4. Create font index information and update font cache:

Copy the codeThe code is as follows:

   # cd /usr/share/fonts/win
# mkfontscale  (If prompted mkfontscale: command not found, you need to install # yum install mkfontscale )
          # mkfontdir
#fc-cache    (If you prompt fc-cache: command not found, you need to install #yum install fontconfig)

At this point, the font has been installed!

<?php 
  if (isset($_GET['url'])) 
  { 
    set_time_limit(0); 
  
    $url = trim($_GET['url']); 
    $filePath = md5($url).'.png'; 
    if (is_file($filePath)) 
    { 
      exit($filePath); 
    } 
 
    //If you don't add this sentence, you will get an error "Fatal: [Errno 2] No such file or directory; did you install phantomjs?", please refer to /    putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
    $command = "phantomjs  {$url} {$filePath}"; 
    @exec($command); 
  
    exit($filePath); 
  } 
?> 
  
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<title>Snapshot generation</title> 
<script src="/jquery-1.8."></script> 
<style> 
* {margin: 0; padding: 0; } form {padding: 20px; } div {margin: 20px 0 0; } input {width: 200px; padding: 4px 2px; } #placeholder {display: none; } 
</style>
</head> 
  
<body> 
  <form action="" > 
    <input type="text"  /> 
    <button type="submit">Generate a snapshot</button> 
  
    <div> 
      <img src="" alt=""  /> 
    </div> 
  </form> 
  <script> 
  $(function(){ 
    $('#form').submit(function(){ 
      if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true) 
      { 
        alert('Site snapshot is being generated, please be patient...'); 
        return false; 
      } 
  
      $(this).data('generate', true); 
      $('button').text('Snapshot is being generated...').attr('disabled', true); 
  
      $.ajax({ 
        type: 'GET', 
        url: '?', 
        data: 'url=' + $('#url').val(), 
        success: function(data){ 
          $('#placeholder').attr('src', data).show(); 
          $('#form').data('generate', false); 
          $('button').text('Generate a snapshot').attr('disabled', false); 
        } 
      }); 
  
      return false; 
    }); 
  }); 
  </script> 
</body> 
</html>


var page = require('webpage').create(); 
var args = require('system').args; 
 
var url = args[1]; 
var filename = args[2]; 
 
(url, function () { 
  (filename); 
  (); 
});

The above is the entire content of this article, I hope you like it.