Como colocar la marca de agua a una imagen en JavaScript

Le gustaría saber como se puede colocar un watermark a alguna de sus imágenes usando node y sharp ?

Estas en un lugar correcto! En pocas palabras de voy a explicar como hacer una marca de agua (un logo) en sus imágenes.

He creado un gist para ello: https://gist.github.com/qant/5abd1c56b2e400e646ad8dbfa0774eee

Abajo os dejare un script completo para cambiar el tamaño de las imágenes y añadir un logo (o marca de agua) a las imágenes grandes

descargar el gist
instalar nodejs
crear las carpetas “images” and “resized”
colocas imágenes originales en la carpeta “images”
colocas imágenesde logo en formato .png con transparencia para marca de agua
npm install (se instala sharp y otras dependencias)
node resaize.js

Las imágenes de diferentes tamaños deben aparecer en la carpeta “resized”

Saludos!


const http = require('https');
const path = require('path');
const fs = require('fs');
const sharp = require('sharp');
const sizes = [[150, 150], [570, 340], [385, 258], [933, 622], [1270, 950]];
const quality = 82;
const imageFolder = 'images';
const imageFolderResized = 'resized';
const watermarkImage = 'final_logokey.png';
const extractFileNames = function (err, files) {
    if (!err) {
        files.forEach(fileName => {
            let fullFileName = path.join(__dirname, imageFolder, fileName);
            let f_name = path.parse(fileName).name;
            let f_ext = path.parse(fileName).ext;
            sizes.forEach(size => {
                size_f_name = f_name + '-' + size[0] + 'x' + size[1] + f_ext;
                console.log('Working on ' + fullFileName);
                //if (size[0] > 933 || size[0] === 1270){
                if (size[0] >= 933) { // sizes width >= 933 will be watermarked
                    sharp(fullFileName, { failOnError: false })
                        .resize(size[0], size[1])
                        .composite([{ input: watermarkImage, gravity: 'center' }])
                        .jpeg({
                            mozjpeg: true,
                            quality: quality,
                            //chromaSubsampling: '4:4:4'
                        })
                        .toFile(path.join(__dirname, imageFolderResized, size_f_name))
                        .then(data => {
                            console.log(size_f_name + ' Is saved and watermarked');
                        }).catch(err => {
                            console.log(size_f_name + ' Error:');
                            console.log(err)
                        });
                } else {
                    console.log('Working on ' + fullFileName);
                    sharp(fullFileName, { failOnError: false })
                        .resize(size[0], size[1])
                        .jpeg({
                            mozjpeg: true,
                            quality: 75,
                            //chromaSubsampling: '1:2:2'
                        })
                        .toFile(path.join(__dirname, imageFolderResized, size_f_name))
                        .then(data => {
                            console.log(size_f_name + ' Is saved');
                        }).catch(err => {
                            console.log(size_f_name + ' Error:');
                            console.log(err)
                        });
                }
            });
        });
    }
}
fs.readdir(imageFolder, extractFileNames);

javascript