second_constantine
25e0a2a96a
Remove the "Лог файл" (Log file) column from the report generation as it's no longer needed. This simplifies the report structure and removes unused functionality.
71 lines
7.0 KiB
Plaintext
71 lines
7.0 KiB
Plaintext
Как добавить водяной знак к изображению (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-адреса данных.
|