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