El programa de manipulación de imágenes de JavaScript, conocido como JIMP por sus amigos, es un paquete de NPM que proporciona una variedad de métodos para editar archivos de imagen en JPEG, PNG y algunos otros formatos.
Su caso de uso más común probablemente sea el procesamiento de imágenes cargadas en un sitio web basado en Node, y en este artículo demostraré cómo usarlo para cambiar el tamaño de una imagen, crear una miniatura y agregar una marca de agua.
En artículos futuros exploraré algunas de las capacidades de JIMP.
Antecedentes
He estado trabajando en un sitio de Node para mis fotografías durante un tiempo vergonzosamente largo, agregando pequeñas partes de funcionalidad de vez en cuando.
Se acerca a una etapa en la que puedo lanzarlo con al menos una funcionalidad básica, y este artículo describe una versión condensada del código que escribí para procesar imágenes después de que se hayan cargado.
El código fuente de este proyecto está en el Repositorio de Github. Solo usaré un pequeño subconjunto de la funcionalidad de JIMP aquí, pero la documentación oficial puede resultarle útil:
Como habrás adivinado, JIMP se puede instalar con este comando:
npm install --save jimp«Hablar es fácil. Enséñame el código»
(Linus Torvalds)
OK Linus, aquí está.
Para fines de demostración, escribí esto para que se ejecute desde la línea de comando, pero las dos funciones, processImagey addWatermark, se puede adaptar para su uso dentro de un sitio web.
La filosofía es crear una función única que lleve a cabo las tres tareas. Por lo tanto, tiene un único argumento que es un objeto que contiene toda la información necesaria para hacerlo.
El archivo comienza con una llamada a esta función, aunque una implementación de la vida real llamaría a la función externamente; en el caso de mi sitio incipiente, esto se realiza desde un servicio REST.
Después de la llamada a la función hay un registro en la consola. Esto aparecerá primero a pesar de que viene después de llamar processImage, y es solo para demostrar que el proceso es asincrónico.
Dentro de processImage función que primero necesitamos require JIMP, y luego llame a su read usando la sintaxis Promise then / catch . La mayor parte de lo que sucede a continuación es sencillo y se explica por sí mismo, pero hay algunas características que vale la pena señalar:
- La Lambda pasó a
thenesasync(ver 4). - Creamos un
clonede la imagen para la miniatura. - JIMP proporciona varias funciones de cambio de tamaño pero
scaleToFites probablemente el más útil ya que solo le damos las dimensiones máximas y hace los cálculos necesarios para que podamos mantener la relación alto: ancho . - Nosotros
awaitaddWatermarkde lo contrario, el código se apresuraría y guardaría la imagen antes de agregar la marca de agua - Los
qualityse establece en 95. Puede ser cualquier valor entre 0 y 100, pero los valores bajos son malos (REALMENTE malos) y generalmente se acepta que los valores superiores a 95 aumentan significativamente sin una mejora notable en la calidad visual. - Como este código fue escrito para mi propio sitio, asumí que nunca subiré imágenes más pequeñas que mi tamaño estándar designado. Si dejara que el público en general se pierda en un sitio, puede dejar imágenes más pequeñas tal como están o imponer un tamaño mínimo.
- He utilizado archivos como fuente y destino con fines de demostración. También puede utilizar búferes, lo que es casi seguro que haría en la práctica para la imagen cargada, y también para las imágenes procesadas si desea almacenarlas en una base de datos como BLOB en lugar de como sistema de archivos.
- En un sistema de producción, es posible que desee pasar una devolución de llamada «onerror» a
processImageen lugar de simplemente enviar los errores a la consola.
La addWatermark función lee archivo de marca de agua y luego calcula la posición de la marca de agua; Lo he codificado de forma rígida para que sea 32 píxeles hacia arriba y hacia la izquierda de la esquina inferior derecha.
La función compuesta luego combina las dos imágenes que en este caso pega efectivamente la imagen de la marca de agua en la imagen principal. He usado el opcional opacitySource argumento para hacer la marca de agua semitransparente.
Ahora ejecutemos el código con este comando. (He codificado el nombre de los archivos de imagen que se suministran con el repositorio. Es posible que desee utilizar su propia foto y marca de agua).
node processuploadedimage.jsEsta es la salida.
La salida es bastante aburrida pero al menos muestra lo que está sucediendo, en particular demostrando que el procesamiento es asíncrono imprimiendo primero «comenzando …» .
La imagen original de 1000 x 667 está en la parte superior de la página, y esta es la imagen redimensionada de 600 x 400 completa con marca de agua.
Y finalmente la miniatura.
JIMP es bastante poderoso y solo he arañado la superficie de lo que puede hacer. Como mencioné anteriormente, tengo algunos artículos más alineados para demostrar una mayor funcionalidad.
Gracias por leer este artículo.
Añadir comentario