Hoy te voy a presentar un software gratuito y open source para poner marcas de agua a una imagen. Lo que tienes que hacer es simplemente seleccionar la imagen, la marca de agua y listo.

Además, puedes ajustar la opacidad y la separación entre marcas de agua. Por otro lado, si no te parece algún aspecto, puedes modificar el código fuente pues es totalmente open source.

He escrito este programa en PHP y JavaScript. Básicamente el procesamiento lo hace PHP, y JS solo es el frontend.

Sé bien que esto se podría hacer con JavaScript para no cargar al servidor, pero a mí me funciona así y por eso es que lo hice de esa manera. A lo largo de este post te mostraré todos los detalles sobre este programa.

Marca de agua con PHP y JavaScript

El programa es muy simple. Seleccionamos las dos imágenes y ajustamos los parámetros. Por cierto, se ponen varias marcas de agua que cubren toda la imagen, contrario a lo que hice con WaterPy en donde una sola marca de agua se coloca en alguna posición.

Después de eso la imagen se puede descargar. Y todo eso se va mostrando en tiempo real, así que siéntete libre de probar con varios estilos y marcas de agua.

Apartado técnico

En el lado del servidor se utiliza PHP con las funciones de la librería GD. Esto es una mejora a un post que ya había hecho anteriormente, solo que ahora le he colocado una interfaz además de brindar la posibilidad de cambiar la opacidad de la marca de agua.

Recuerda habilitar la librería GD en caso de que utilices este proyecto.

Funciones útiles

Yo utilizo dos funciones, la primera es para cambiar la opacidad y la segunda es para colocar la marca de agua. Solo estoy usando funciones de la biblioteca GD tales como imagepng, imagejpeg, etcétera.

Cabe mencionar que la función que coloca la marca de agua no regresa nada, en su lugar simplemente muestra la imagen, es decir, la devuelve al navegador o al cliente.

See the gist on github.

API para colocar imagen

Ahora simplemente exponemos las funciones anteriores a través de PHP. Vamos a leer los archivos de $_FILES y luego mostrar la salida al cliente:

See the gist on github.

Lado del cliente

En el lado del cliente es en donde ajustamos los parámetros como la opacidad y la separación de las marcas de agua. También verificamos el cambio de los input para generar la nueva imagen.

El código JavaScript queda así:

See the gist on github.

Además se hacen ciertos ajustes para obtener la imagen como un BLOB usando fetch y colocarla en una etiqueta img, del mismo modo que agregamos un enlace temporal para cuando se descarga la imagen.

El código HTML completo junto con el script queda así:

See the gist on github.

Y así es como podemos agregar fácilmente marcas de agua con JavaScript y PHP. Este programa soporta imágenes JPG así como PNG, puedes probarlo y verás que funciona.

Además, al cambiar cualquier valor, la imagen se refresca de manera inmediata.

Poniendo todo junto

Te dejo el código completo en mi GitHub, solo necesitas contar con Apache, PHP y la librería GD instalada y habilitada.

Recuerda que puedes usar esto de manera local o subirlo a un servidor de internet, aunque recuerda que el trabajo con imágenes siempre es algo pesado, en especial cuando son varios clientes.

Por otro lado te invito a leer más sobre PHP y JavaScript en mi blog.