Добавлять водяные знаки к картинкам очень просто, для этого используется элемент 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”.