Как добавить водяные знаки на изображения с помощью 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.