Водяные знаки – популярный способ защитить цифровой контент и добавить фирменный стиль изображениям. В этой статье мы рассмотрим различные методы добавления водяных знаков к изображениям с помощью библиотеки Jimp, мощного инструмента обработки изображений для Node.js. Мы предоставим примеры кода для каждого метода, которые помогут вам эффективно реализовать водяные знаки. Давайте погрузимся!

Метод 1: текстовый водяной знак
Один из самых простых способов добавить водяной знак — наложение текста на изображение. Jimp предлагает простой метод для этого:

const Jimp = require('jimp');
Jimp.read('input.jpg')
  .then(image => {
    return Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
      .then(font => {
        image.print(font, 10, 10, 'Watermark Text');
        return image.write('output.jpg');
      });
  })
  .catch(err => {
    console.error(err);
  });

Метод 2: водяной знак изображения.
Другой популярный метод — наложение изображения в качестве водяного знака на исходное изображение. Вот как этого можно добиться с помощью Jimp:

const Jimp = require('jimp');
Promise.all([Jimp.read('input.jpg'), Jimp.read('watermark.png')])
  .then(images => {
    const image = images[0];
    const watermark = images[1];
    watermark.resize(image.getWidth() / 2, Jimp.AUTO);
    image.composite(watermark, 10, 10, {
      mode: Jimp.BLEND_SOURCE_OVER,
      opacityDest: 1,
      opacitySource: 0.5
    });
    return image.write('output.jpg');
  })
  .catch(err => {
    console.error(err);
  });

Метод 3: прозрачный водяной знак
Чтобы добавить прозрачный водяной знак, вы можете изменить непрозрачность изображения водяного знака. Вот пример:

const Jimp = require('jimp');
Promise.all([Jimp.read('input.jpg'), Jimp.read('watermark.png')])
  .then(images => {
    const image = images[0];
    const watermark = images[1];
    watermark.opacity(0.5);
    image.composite(watermark, 10, 10, {
      mode: Jimp.BLEND_SOURCE_OVER,
      opacityDest: 1,
      opacitySource: 1
    });
    return image.write('output.jpg');
  })
  .catch(err => {
    console.error(err);
  });

Метод 4: мозаичный водяной знак
Вы можете разместить меньшее изображение водяного знака по всему изображению, чтобы добиться уникального эффекта. Вот как это можно сделать:

const Jimp = require('jimp');
Promise.all([Jimp.read('input.jpg'), Jimp.read('watermark.png')])
  .then(images => {
    const image = images[0];
    const watermark = images[1];
    watermark.resize(100, 100);
    image.scan(0, 0, image.getWidth(), image.getHeight(), (x, y, idx) => {
      image.setPixelColor(watermark.getPixelColor(x % 100, y % 100), x, y);
    });
    return image.write('output.jpg');
  })
  .catch(err => {
    console.error(err);
  });

В этой статье мы рассмотрели различные методы добавления водяных знаков к изображениям с помощью библиотеки Jimp. Мы рассмотрели текстовые водяные знаки, водяные знаки изображений, прозрачные водяные знаки и мозаичные водяные знаки. Предоставленные примеры должны стать хорошей отправной точкой для внедрения водяных знаков в ваши собственные проекты. Не забудьте настроить код в соответствии с вашими конкретными требованиями. Защитите свои изображения и улучшите свой бренд с помощью этого ценного метода!