Web screenshot con NodeJS, PhantomJS y Express

PhantomJS para realizar web snapshots mediante una dirección URL, haciendo un render del archivo estático.

#recursos#nodejs
web-screenshot-nodejs-phantomjs-express

Instalamos NodeJS & PhantomJS con brew

brew install node
brew install phantomjs

Creamos un directorio, y nuevo archivo : package.json, con el siguiente contenido :

{
  "name": "phantomjs_screenshot",
  "description": "phantomjs screeshot",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "3.x",
    "phantom": "*",
    "jade": "*"
  }
}

Instalamos dependencias:

npm install

Express para manejar las rutas y servir activos estáticos, y Jade como el middleware HTML.

Se crea un subdirectorio vistas de Jade con un nuevo diseño, de archivo: visualiza / layout.jade

doctype html
html(lang="en")
  head
    title #{title}
  body
    header
      h1 #{title}
    .container
      block content

Y otro archivo de vista de la página de índice, / index.jade .

extend layout
block content
  form(name="process_url", action="/process_url", method="post")
    input(type="text", name="url")
    input(type="submit", value="Submit")

Creamos el archivo principal de la aplicación "app.js" para ejecutar el servidor.

var express = require('express');
var app = express();

// define the public directory for static assets
var public_dir = __dirname + '/public';

// setup express
app.use(express.compress());
app.use(express.static(public_dir));
app.use(express.json());
app.use(express.urlencoded());

// setup jade
app.set('views', __dirname + '/views')
app.set('view engine', 'jade')

// route: get: /
app.get('/', function (req, res) {
  res.render('index',
    { title : 'NodeJS PhantomJS Screenshot' }
  )
});

// route: post: /process_url
app.post('/process_url', function (req, res) {

  // get url to process
  var url_to_process = req.body.url;
  if (url_to_process === undefined || url_to_process == '') {
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.end("404 Not Found");
  }

  // phantomjs screenshot
  var phantom = require('phantom');
  phantom.create(function(ph){
    ph.createPage(function(page){
      page.open(url_to_process, function(status){
        if (status == "success") {
          // put images in public directory
          var image_file_name = url_to_process.replace(/\W/g, '_') + ".png"
          var image_path = public_dir + "/" + image_file_name
          page.render(image_path, function(){
            // redirect to static image
            res.redirect('/'+image_file_name);
          });
        }
        else {
          res.writeHead(404, {'Content-Type': 'text/plain'});
          res.end("404 Not Found");
        }
        page.close();
        ph.exit();
      });
    });
  });

});

// start server
var server = app.listen(3000, function() {
  console.log('Listening on port %d', server.address().port);
});

Iniciamos la aplicación. http: // localhost: 3000 .

node app.js

repositorio en github

Si te ha servido, deja tus comentarios :-)