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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img id="sourceImage" src="buldog.png" alt="Buldog image" style="display:none;">
<canvas id="canvas"></canvas>
    <script src="app.js"></script>
</body>
</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 для другого тега <img>.

Полный код

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

<img id="sourceImage" src="path/to/your-image.jpg" alt="Source Image" style="display:none;">
<canvas id="canvas"></canvas>

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

image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0);

    // Adding Text Watermark
    context.font = "30px Arial";
    context.fillStyle = "rgba(255, 255, 255, 0.5)";
    context.textAlign = "right";
    context.textBaseline = "bottom";
    context.fillText("Your Watermark Text", canvas.width - 10, canvas.height - 10);

    // Adding Image Watermark
    const watermarkImage = new Image();
    watermarkImage.src = 'path/to/watermark.png';
    watermarkImage.onload = function() {
        context.globalAlpha = 0.5; // Set opacity
        context.drawImage(watermarkImage, canvas.width - watermarkImage.width - 10, canvas.height - watermarkImage.height - 10);
        context.globalAlpha = 1.0; // Reset opacity
    };
};
</script>

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

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

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

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