Инструмент добавления водяного знака

Водяной знак на изображении накладывает текст, логотип или другую картинку поверх фотографии, чтобы показать авторство, источник, бренд, статус использования или контекст публикации. Его применяют для товарных фото, портфолио, событийных снимков, учебных материалов, соцсетей и предварительных макетов перед согласованием. Важно сохранить баланс: знак должен быть заметным и мешать простому повторному использованию, но не закрывать главный объект, фактуры и важные детали. Положение, прозрачность, размер, повторение и угол нужно подбирать под конкретный кадр. Локальная обработка в браузере помогает не отправлять оригинал наружу. Перед массовой обработкой полезно проверить один пример на разных размерах просмотра.

Наложение водяного знака происходит полностью на 2D-холсте. Исходное изображение отрисовывается в HTMLCanvasElement с его родными пиксельными размерами через ctx.drawImage, затем текст или логотип композитируется поверх с помощью ctx.fillText для строк и второго вызова drawImage для растровых наложений. Прозрачность управляется через ctx.globalAlpha, который перемножается с каждым альфа-каналом далее; globalAlpha 0.5 против 50%-прозрачного PNG даёт 25% на итоговом пикселе, что является самой частой причиной жалоб «почему мой водяной знак невидимый». Позиционирование использует стандартные преобразования холста: ctx.translate перемещает начало координат к якорю размещения (левый верх, правый верх, центр, правый низ или каждая ячейка сетки 3×3), ctx.rotate(angle) наклоняет диагональный штамп вокруг этого начала, и вызов отрисовки размещает знак без дополнительного смещения. Замощённые водяные знаки используют CanvasPattern.createPattern с повёрнутым источником и ctx.fillRect по всему холсту — именно так полоса DRAFT на целой странице остаётся равномерно распределённой независимо от размеров исходного изображения. Метрики шрифта берутся из ctx.measureText, который выдаёт CSS-пиксели, поэтому метка 28 px, помещающаяся в предпросмотре на 2x дисплее, может обрезаться при экспорте на 1x мобильном устройстве. Экспорт вызывает canvas.toBlob с 'image/png', 'image/jpeg' или 'image/webp' и опциональным параметром качества для форматов с потерями. Холст работает с разрешением источника, поэтому выходной файл сохраняет оригинальные пиксельные размеры, но не переносит EXIF-ориентацию, ICC-профиль или другие метаданные исходника. Пакеты свыше ~30 крупных файлов начинают блокировать UI-поток, потому что toBlob асинхронный, но стек отрисовки работает синхронно в основном потоке, поэтому тяжёлые задачи выигрывают от переноса работы с холстом в Web Worker с OffscreenCanvas.

• Стек композиции: ctx.drawImage для основы, ctx.fillText (или второй drawImage) для знака, ctx.globalAlpha для перемножения прозрачности.
• Альфа-математика: globalAlpha перемножается с существующей альфой каждого пикселя, поэтому знак 0.5 на PNG с альфой 0.5 отображается как 0.25, а не 0.5.
• Поворот: ctx.translate к якорю, ctx.rotate(angle) в радианах, затем отрисовка в начале координат (0,0), чтобы трансформация оставалась центрированной на точке размещения.
• Замостка: createPattern возвращает CanvasPattern, которым fillRect может заполнить весь холст, сохраняя равномерный интервал при любых размерах источника.
• Метрики текста: measureText выдаёт CSS-пиксели, поэтому метка, рассчитанная в предпросмотре на 2x, может выйти за край изображения при экспорте на 1x мобильном устройстве; в сомнительных случаях задавайте размер пропорционально canvas.width.
• Экспорт: toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) сохраняет разрешение источника, но удаляет EXIF и ICC; если важна правильная ориентация, поворачивайте по EXIF-ориентации перед отрисовкой.