Get it on Google Play
07-05-2018
 

Desarrollo de una API Rest en Javascript para descargar URLs y convertirlas a imágenes PNG

Curso API Management III: Implementación de un API Javascript

Curso API Management III: Implementación de un API Javascript

Este es el artículo anexo al tercer módulo del curso de API Management que tengo publicado en Youtube. Os dejo aquí el link al primer capítulo del curso: Introducción a las APIs y aplicación al negocio.

En esta ocasión vamos a implementar una API en Javascript a la que podremos hacerle peticiones para descargar páginas web y convertirlas a imágenes PNG de 400 por 400 píxeles.

Primero de todo vamos a asegurarnos que tenemos las siguientes dependencias en nuestro ordenador(Linux):

  • NodeJS Para poder ejecutar Javascript del lado servidor.
  • NPM Gestor de paquetes ampliamente utilizado en proyectos Javascript.
  • wkhtmltoimage Utilidad en línea de comandos que convierte páginas web en imágenes.
  • Imagemagic Utilidad en línea de comandos para para trabajar con imágenes, en nuestro caso lo utilizaremos para reducir el tamaño de las imágenes y recortarlas a 400 por 400 píxeles.

Ya con esto nos creamos una carpeta para el proyecto y ejecutamos:

# Inicializamos el proyecto
npm init

# Instalamos el módulo express
npm install  express --save

# Instalamos el módulo fs-extra
npm install fs-extra --save

Ahora ya podemos crear nuestro fichero ‘index.js’ con la aplicación:

const express = require('express');
const exec = require('child_process').execSync;
const fs = require('fs');

const wkhtmltoimage='%Carpeta hasta wkhtmltox% wkhtmltox/bin/wkhtmltoimage';
const filesFolder='%Carpeta donde se guardan las imagenes%';

const app = express();

/* Definimos el API de la aplicación Web */
app.get('/', function (req, res) {
	var out='';
	out+='<h2>Servicio para convertir web en imágenes</h2>';

	out+='<ul>';
	out+='<li>/html2png?url=&lt;URL> Descargar URL.</li>';
	out+='<li>/image Listado de imagenes.</li>';
	out+='<li>/image/&lt;id> Descargar imágen.</li>';
	out+='</ul>';

    	res.send( out );
	});

app.get('/html2png', function (req, res) {
    var pngId=uuidv4();
    var pngFile=filesFolder+"/"+pngId+".png";

    if ( req.query.url==undefined ) {
	res.send( { 'status': 'error', 'description': 'Falta el parámetro URL.' } );
	res.end();

	return;		
	}

    var result=exec(wkhtmltoimage+" "+req.query.url+" "+pngFile );
    if ( result.indexOf("Done") ) {
	result=exec("convert "+pngFile+" -resize 400 "+pngFile);
    	result=exec("convert "+pngFile+" -crop 400x400+0+0 "+pngFile);

    	res.send( { 'status': 'created', 'id': pngId } );
    	res.end();
	return;
	}

    res.send( { 'status': 'error', 'description': 'Error al crear la imagen' } );
    });

app.get('/image', function (req, res) {
    var r=[];
    var files = fs.readdirSync( filesFolder );

    for ( var i=0; i<files.length; i++ )
	r.push( files[i].substring( 0, files[i].indexOf('.')) );

    res.send( r );
    });

app.get('/image/:id', function (req, res) {

    if ( req.params.id==undefined ) {
	res.send( { 'status': 'error', 'description': 'Falta el parámetro Id.' } );
	res.end();

	return;		
	}

    if (fs.existsSync(filesFolder+"/"+req.params.id+".png") ) {
    	res.download( filesFolder+"/"+req.params.id+".png" );
	return;
	}

    res.send( { error: "File not found"} );
    });

/* Ponemos la aplicación a funcionar por el puerto 3000 */
app.listen(3000, function () {
    console.log('Sistema armado en el puerto 3000!');
    });

/* Función que genera un UUID */
function uuidv4() {
   var uuid = "", i, random;
   for (i = 0; i < 32; i++) {
    random = Math.random() * 16 | 0;

    if (i == 8 || i == 12 || i == 16 || i == 20) uuid += "-";

    uuid += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16);
    }

   return uuid;
   }

El código esta bastante claro y comentado pero os recomiendo que os miréis el vídeo donde construyo la aplicación para que os quede mas claro.

En fin, esto es todo, espero que os resulte interesante.

Si te ha servido, por favor comparte
 

Leave a Reply