Как добавить водяной знак к изображению (HTML + JavaScript) От Редакция techrocks.ru / 10.01.2025 Добавлять водяные знаки к картинкам очень просто, для этого используется элемент 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”. 7 уроков дизайна для разработчиков 1 комментарий / Новости, Обучение / От andrey_av Не документируйте код. Кодируйте документацию 1 комментарий / Новости, Обучение / От andrey_av
==============
В статье описаны способы добавления водяных знаков к изображениям с использованием HTML5 Canvas API. Предлагаются методы добавления текстовых и графических водяных знаков, а также настройки их расположения, прозрачности и стилей. Для реализации используются теги <img> и <canvas> в HTML, а также JavaScript для работы с Canvas API. Описаны способы экспорта результата в виде URL-адреса данных.
