Юрий Кочетов: Как добавить водяные знаки на изображения с помощью JavaScript​​

Нанесение водяных знаков на изображения часто необходимо для защиты контента от несанкционированного использования. В этой статье мы рассмотрим несколько подходов к добавлению водяных знаков на изображения на стороне клиента с помощью JavaScript.

Использование HTML5 Canvas для водяных знаков

HTML5 <canvas> — это мощный инструмент для работы с изображениями прямо в браузере. С его помощью можно динамически добавлять водяные знаки на изображения. Вот простой пример:

<canvas id=”myCanvas”></canvas>
<img id=”myImage” src=”your-image.jpg” style=”display:none;” />

<script>
const canvas = document.getElementById(“myCanvas”);
const ctx = canvas.getContext(“2d”);
const img = document.getElementById(“myImage”);

img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;

// Рисуем изображение на canvas
ctx.drawImage(img, 0, 0);

// Настраиваем стиль для водяного знака
ctx.font = “40px Arial”;
ctx.fillStyle = “rgba(255, 255, 255, 0.5)”;
ctx.textAlign = “right”;

// Наносим водяной знак
ctx.fillText(“Водяной знак”, canvas.width – 10, canvas.height – 20);
};
</script>

Это решение отлично подходит для динамической генерации изображений с водяными знаками на стороне клиента. Однако оно требует определённых навыков работы с элементом canvas.

Использование Fabric.js для работы с изображениями

Fabric.js — это библиотека, которая упрощает работу с элементом canvas. Она позволяет легко добавлять текстовые или графические водяные знаки к изображениям.

<canvas id=”c” width=”500″ height=”500″></canvas>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js”></script>
<script>
const canvas = new fabric.Canvas(‘c’);

fabric.Image.fromURL(‘your-image.jpg’, function(img) {
canvas.setWidth(img.width);
canvas.setHeight(img.height);
canvas.add(img);

const watermark = new fabric.Text(‘Водяной знак’, {
left: img.width – 150,
top: img.height – 50,
fontSize: 30,
fill: ‘rgba(255, 255, 255, 0.5)’,
fontFamily: ‘Arial’
});
canvas.add(watermark);
});
</script>

Fabric.js значительно упрощает процесс работы с изображениями и добавления водяных знаков. Она позволяет создавать масштабируемые и редактируемые элементы на canvas.

Использование Watermark.js для добавления водяных знаков

Watermark.js — это библиотека, специально предназначенная для нанесения водяных знаков. Она поддерживает как текстовые, так и графические водяные знаки и может работать на стороне клиента.

<script src=”https://unpkg.com/watermarkjs/dist/watermark.min.js”></script>
<script>
watermark([‘your-image.jpg’])
.image(watermark.text.lowerRight(‘Водяной знак’, ’48px Arial’, ‘#FFF’, 0.5))
.then(img => document.body.appendChild(img));
</script>

Watermark.js — это простое и эффективное решение, которое позволяет легко добавлять водяные знаки к изображениям на стороне клиента.

Серверная обработка с помощью Sharp

Если вам нужно обрабатывать большое количество изображений, лучше рассмотреть вариант с использованием серверных инструментов, таких как Sharp. Это библиотека для Node.js, которая позволяет добавлять водяные знаки на сервере до загрузки изображения на сайт.

const sharp = require(‘sharp’);

sharp(‘your-image.jpg’)
.composite([{ input: ‘watermark.png’, gravity: ‘southeast’ }])
.toFile(‘output-image.jpg’, (err, info) => {
if (err) throw err;
console.log(info);
});

Серверная обработка водяных знаков идеальна для сайтов с большим объёмом загружаемых изображений, где необходима высокая производительность и безопасность.

Заключение

Нанесение водяных знаков на изображения — это важный шаг для защиты вашего контента. Выбор между клиентской и серверной обработкой зависит от особенностей вашего проекта. Если требуется гибкость и скорость на клиентской стороне, можно использовать HTML5 Canvas, Fabric.js или Watermark.js. Для более крупных проектов с высокой нагрузкой рекомендуется серверная обработка с помощью Sharp.

Подробнее…

​  

​Сообщения блогов группы “Личные блоги” (www.securitylab.ru)

​Read More