Cómo añadir marcas de agua a imágenes con JavaScrip

Aplicar marcas de agua a las imágenes a menudo es necesario para proteger el contenido del uso no autorizado. En este artículo revisamos varios enfoques para añadir marcas de agua a las imágenes del lado del cliente con JavaScript.

Uso de HTML5 Canvas para marcas de agua

HTML5 <canvas> es una herramienta potente para trabajar con imágenes directamente en el navegador. Con ella se pueden añadir marcas de agua de forma dinámica a las imágenes. Aquí hay un ejemplo sencillo:

<canvas id="myCanvas"></canvas>
<img id="myImage" src="your-image.jpg" style="display:none;" />

<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    const img = document.getElementById("myImage");

    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;

        // Dibujar la imagen en el canvas
        ctx.drawImage(img, 0, 0);

        // Configurar el estilo para la marca de agua
        ctx.font = "40px Arial";
        ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
        ctx.textAlign = "right";

        // Aplicar la marca de agua
        ctx.fillText("Marca de agua", canvas.width - 10, canvas.height - 20);
    };
</script>

Esta solución es adecuada para la generación dinámica de imágenes con marcas de agua en el lado del cliente. Sin embargo, requiere cierta habilidad para trabajar con el elemento canvas.

Uso de Fabric.js para trabajar con imágenes

Fabric.js es una biblioteca que facilita el trabajo con el elemento canvas. Permite añadir fácilmente marcas de agua de texto o gráficas a las imágenes.

<canvas id="c" width="500" height="500"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<script>
    const canvas = new fabric.Canvas('c');
    
    fabric.Image.fromURL('your-image.jpg', function(img) {
        canvas.setWidth(img.width);
        canvas.setHeight(img.height);
        canvas.add(img);
        
        const watermark = new fabric.Text('Marca de agua', {
            left: img.width - 150,
            top: img.height - 50,
            fontSize: 30,
            fill: 'rgba(255, 255, 255, 0.5)',
            fontFamily: 'Arial'
        });
        canvas.add(watermark);
    });
</script>

Fabric.js facilita considerablemente el proceso de trabajo con imágenes y la adición de marcas de agua. Permite crear elementos escalables y editables en el canvas.

Uso de Watermark.js para añadir marcas de agua

Watermark.js es una biblioteca diseñada específicamente para aplicar marcas de agua. Soporta marcas de agua tanto de texto como gráficas y puede funcionar del lado del cliente.

<script src="https://unpkg.com/watermarkjs/dist/watermark.min.js"></script>
<script>
    watermark(['your-image.jpg'])
        .image(watermark.text.lowerRight('Marca de agua', '48px Arial', '#FFF', 0.5))
        .then(img => document.body.appendChild(img));
</script>

Watermark.js es una solución sencilla y eficaz que permite añadir marcas de agua a las imágenes en el lado del cliente con facilidad.

Procesamiento en servidor con Sharp

Si necesita procesar una gran cantidad de imágenes, conviene considerar el uso de herramientas del lado del servidor, como Sharp. Es una biblioteca para Node.js que permite añadir marcas de agua en el servidor antes de subir la imagen al sitio.

const sharp = require('sharp');

sharp('your-image.jpg')
    .composite([{ input: 'watermark.png', gravity: 'southeast' }])
    .toFile('output-image.jpg', (err, info) => { 
        if (err) throw err;
        console.log(info);
    });

El procesamiento en servidor de marcas de agua es ideal para sitios con un gran volumen de imágenes subidas, donde se necesita alto rendimiento y seguridad.

Conclusión

Aplicar marcas de agua a las imágenes es un paso importante para proteger su contenido. La elección entre el procesamiento en el cliente y en el servidor depende de las características de su proyecto. Si se necesita flexibilidad y rapidez en el lado del cliente, se pueden usar HTML5 Canvas, Fabric.js o Watermark.js. Para proyectos más grandes con alta carga, se recomienda el procesamiento en servidor con Sharp.