Водяной знак на изображении
Добавьте текстовый водяной знак на фото с живым предпросмотром прямо на реальном изображении, чтобы точно видеть, как будут выглядеть размер, прозрачность, угол и положение.
Нажмите, чтобы выбрать изображение, или перетащите его сюда
JPG, PNG, WebP. Остаётся на вашем устройстве, ничего не загружается.
Изображение с водяным знаком появится здесь после создания.
Предпросмотр выше показывает ваш водяной знак в реальном времени прямо на изображении, пока вы настраиваете размер, прозрачность, угол, цвет и положение. Итоговый файл для скачивания соответствует тому, что вы видите, в полном разрешении вашего изображения.
Как это работает
Живой предпросмотр — это позиционированный DOM-элемент, наложенный поверх вашего фото, но итоговое изображение — это настоящая работа с пикселями на <canvas>. Когда вы нажимаете «применить», исходное изображение отрисовывается в полном разрешении, затем контекст canvas смещается к одной из девяти опорных точек (углы, середины краёв, центр, каждая с отступом 6%), поворачивается на заданный угол, и текст рисуется с помощью fillText() с вашим цветом и прозрачностью через globalAlpha. Выравнивание текста и базовая линия задаются в зависимости от опорной точки, поэтому «справа внизу» в предпросмотре попадает в ту же относительную точку в результате.
Тонкий момент — масштаб. Ваш предпросмотр на экране может быть шириной 500 пикселей, тогда как реальное фото — 4000, поэтому наивный инструмент отрисует водяной знак, который выглядел правильно в предпросмотре, но получится микроскопическим. Этот инструмент измеряет соотношение между отображаемой шириной предпросмотра и естественной шириной изображения и умножает размер шрифта на это соотношение, поэтому 48px в предпросмотре означает тот же пропорциональный размер в файле полного разрешения. Результат перекодируется в исходном формате: JPEG с качеством 0.95, PNG без потерь (выбирайте PNG, если хотите максимально чёткие края текста).
Стоит понимать, что представляет собой водяной знак: этот текст впекается в пиксели, а не хранится как слой или метаданные, поэтому никто не может удалить его так, как удаляются данные EXIF. У этого есть две стороны. Маленький знак с низкой прозрачностью в углу — лёгкая добыча для инструментов обрезки и AI-инпейнтинга; водяной знак, который действительно защищает изображение, перекрывает объект съёмки, расположен под углом, с умеренной прозрачностью — именно для этого и служат элементы управления положением, углом и прозрачностью.
И предпросмотр, и финальный рендеринг выполняются в вашей вкладке. Проверьте панель Network в DevTools во время работы: фото никогда не загружается, поэтому клиентские пруфы и неопубликованные кадры остаются на вашем компьютере.