Невидимый ватермарк

Привет, Хабр! Сейчас я хочу поговорить с тобой о защите изображений на веб-сайтах от копирования. Ниже я сначала на всякий случай перечислю то, о чём мы все уже давно знаем, а потому предложу свою идею, которая, как мне кажется, может заинтересовать тебя.

Часть первая, историческая

До сих пор, я видел два способа защиты изображений от копирования:

Блокировка клавиш

Этот способ особенно часто используется на разного рода «хомяках». Суть его заключается в том, чтобы через JavaScript блокировать правую кнопку мыши, мешать выделению текста или изображений и так далее. Думаю, минусы данного подхода очевидны: крайне раздражает, когда воспользоваться функционалом браузера или расширения мешает вот такая вот «защита» (не так уж и сложно, между прочим, обходимая).

Ватермарк

Ватермарк (или цифровой водяной знак) — имя, псевдоним, адрес сайта, логотип или что-нибудь ещё, что может помочь идентифицировать первоначального создателя изображения, нанесённое на изображение.

Ватермарки бывают разными, от вот таких:



… и до вот таких:



Спасибо Студии Артемия Лебедева за прекрасные примеры.



Хотя ватермарки достаточно эффективны (их сложно удалить, не нанеся вред изображению, особенно если ватермарк непрозрачен), они надоедливы, могут доставлять дискомфорт пользователю и отвлекать его от непосредственно изображения. К тому же, иногда можно встретить случаи, когда люди, копирующие изображения, ватермарк одного веб-сайта перекрывают своим ватермарком.



Как вы видите, оба способа отнюдь не идеальны и основной их бедой является тот факт, что они отвлекают пользователя. Давайте подумаем, что же с этим можно сделать.

Часть вторая, подготовительная

Когда я задумался над этим вопросом, первым, что мне пришло в голову, была идея подгружать изображения в объект типа Image, а потом отрисовывать его в canvas, ведь изображение из canvas не так-то и просто сохранить, но у такого подхода было несколько серьёзных минусов:

• Поисковики не будут индексировать такое изображение


• В исходном коде всё равно будет видна ссылка на изображение, которое можно свободно скачать


• В браузерах без поддержки canvas такое изображение не будет видно


• и т.д. и т.п.

Часть третья, теоретическая

Когда я ещё немного подумал над идеей, изложенной выше, я придумал способ, ради которого, собственно, и писа́лась данная статья. Новая идея была следующей: сначала будем отображать просто изображение с ватермарком. Однако, если в браузере доступен canvas, загрузим изображение в canvas и сотрём ватермарк.

В принципе, такой подход спасает нас от всех проблем предыдущего: и поисковик такую картинку будет индексировать, и старые браузеры увидят (хоть и с ватермарком), а в исходнике будет только ссылка на картинку с ватермарком.

Однако, встаёт резонный вопрос: а как мы вообще собираемся удалять ватермарк? Здесь нам на руку играет тот факт, что в большинстве случае, ватермарки — простые и полупрозрачные изображения или надписи, чаще всего выполненные белым цветом.

Давайте подумаем, а как вообще накладывается ватермарк на изображение? Вот, например, у нас есть какой-то пиксель с цветом (135, 42, 31), а мы хотим поверх него нарисовать пиксель (255, 255, 255, 0.25), где последнее число означает непрозрачность и хотим узнать, каким станет цвет этого пикселя в итоге. Я не буду напрягать читателей своими мыслями вслух, а просто приведу формулу, по которой расчитывается новое значение компоненты какого-либо цвета произвольного пикселя при наложении на него пикселя с каким-то другим цветом и определённой непрозрачностью (где alpha — значение непрозрачности):

C_new = C_old * (1 — alpha) + C_overlay * alpha

Соответственно, ответом на вопрос выше является (165, 95, 87) (естественно, мы округляем результаты до ближайшего целого числа). Что же это значит для нас? Это значит, что имея изображение с наложенным полупрозрачным ватермарком, а так же сам ватермарк, мы можем получить оригинальное изображение, выполнив обратные действия.

Часть четвёртая, практическая

Очень быстро я написал Python-скрипт, который позволил точно накладывать ватермарк на изображения (скрипт был использован для создания изображения, которое вы могли видеть в начале топика). Потом я написал скрипт на JavaScript, который умеет заменять какое-нибудь изображение на canvas, который содержит это изображение, но уже без ватермарка. Сам скрипт получился очень простым, ибо ничего действительно сложного делать ему не пришлось, а манипуляция пикселей в JavaScript сделана достаточно удобно.

Демонстрации работы скрипта доступны здесь: демо 1 показывает, как выглядят все ресурсы, используемые скриптом, а демо 2 показывает автоматический режим, когда изображение автоматически заменяется на его аналог без ватермарка, практически незаметно для пользователя.

Для того, чтобы помешать теоретическому «вору» скопировать изображение из canvas через метод toDataURL(), можно сделать что-нибудь (например, до начала всех плясок нарисовать на канвасе какое-нибудь изображение с внешнего домена), пометив тем самым canvas как «not origin-safe» (подробнее об этом можно почитать в спецификации), тем самым запретив использование функции toDataURL().

Часть пятая, заключительная

Что же мы получили в результате? В результате мы получили способ защиты изображений, который решает бо́льшую часть проблем, присущих другим способам: он (в большинстве случаев) незаметен для пользователя; (почти) не мешает индексации; работает во всех браузерах (хотя и вынужден показывать ватермарк в некоторых); самым простым способом скопировать изображение, защищенное при помощи этого способа, является сделать скриншот браузера и вырезать изображение, что большинству людей делать будет просто лень.

Несомненно, он обладает и некоторыми недостатками:

• Изображения, защищенные таким способом, не получится искать в TinEye, IQDB или Google Images, используя расширение для браузера или drag'n'drop


• При большом количестве изображений на странице, canvas может начать подтормаживать и/или поедать достаточно много оперативной памяти

Я думаю, такой способ мог бы быть использован на страницах фотографов и в социальных сетях, так как там обычно на одной странице находится лишь одна фотография (превью, думаю, можно особо не защищать), а использование TinEye там не очень актуально.

Благодарю читателей за внимание и прошу оставлять все замечание, идеи и предложения в комментариях к данной статье, ибо я буду рад узнать, что вы думаете об этой идее.



P.S.: Спасибо организаторам и пресс-службе IOI 2011 за фото, использованное в примерах, доступное на веб-сайте олимпиады.









Источник: Хабрахабр - Веб-разработка
Оригинальная страница: Невидимый ватермарк