Как добавить водяной знак к изображению (HTML + JavaScript)

Добавлять водяные знаки к картинкам очень просто, для этого используется элемент HTML5 . Добавляемые таким образом водяные знаки можно стилизовать, настраивать их расположение и прозрачность. В этом руководстве мы рассмотрим, как добавить водяной знак в виде текста или картинки.

1. Создаем структуру HTML

Для начала добавляем тег для исходного изображения и элемент в наш HTML-код.

2. JavaScript-код для добавления текстового водяного знака

Вы можете использовать Canvas API для отрисовки изображения и добавления текстового водяного знака. Вот так:

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const image = document.getElementById('sourceImage');

// Set the canvas size to match the image dimensions
image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0);

    // Set text properties for the watermark
    context.font = "30px Arial";
    context.fillStyle = "rgba(255, 255, 255, 0.5)"; // white text with 50% opacity
    context.textAlign = "right";
    context.textBaseline = "bottom";
    
    // Draw the watermark text
    context.fillText("Your Watermark Text", canvas.width - 10, canvas.height - 10); // bottom-right corner
};

Этот код выведет изображение на холсте, а затем добавит полупрозрачный текст в нижнем правом углу.

3. Как добавить водяной знак в виде картинки

Если вы предпочитатете использовать в качестве водяного знака картинку, загрузите ее отдельно и отрисуйте поверх основного изображения.

const watermarkImage = new Image();
watermarkImage.src = 'path/to/watermark.png';

watermarkImage.onload = function() {
    context.drawImage(watermarkImage, canvas.width - watermarkImage.width - 10, canvas.height - watermarkImage.height - 10);
};

Здесь watermarkImage рисуется в правом нижнем углу холста, в 10 пикселях от краев. Предварительно настройте его непрозрачность в редакторе изображений или в Canvas с помощью globalAlpha:

context.globalAlpha = 0.5; // 50% opacity
context.drawImage(watermarkImage, canvas.width - watermarkImage.width - 10, canvas.height - watermarkImage.height - 10);
context.globalAlpha = 1.0; // Reset opacity for future drawings

4. Экспорт результата

Чтобы сохранить или использовать изображение с водяным знаком, преобразуйте содержимое canvas в URL-адрес данных:

const watermarkedImageURL = canvas.toDataURL("image/png");

Вы можете использовать этот URL для загрузки изображения с водяным знаком или задать его в качестве src для другого тега .

Полный код

Объединяем все шаги:

Советы по настройке

• Настраивайте расположение водяных знаков, меняя координаты x и y в fillText и drawImage.
• Изменяйте context.globalAlpha, чтобы управлять прозрачностью водяного знака-картинки.
• Чтобы придать текстовому водяному знаку желаемый стиль, настраивайте context.font и context.fillStyle.

Этот код позволяет накладывать как текстовые, так и графические водяные знаки с настраиваемыми параметрами стиля. Для дальнейшей кастомизации можно менять свойства шрифта, цвет и расположение водяных знаков.

Перевод статьи “How to Add Image Watermarks Using HTML5 Canvas”.

Запись Как добавить водяной знак к изображению (HTML + JavaScript) впервые появилась techrocks.ru.