Вырезать изображение после завершения загрузки

Question

Я много искал, но не было найдено достаточного количества.

Мне нужно разместить изображение (900 X 5200 px) на одной из моих страниц. Поскольку изображение чувствительно, мне нужно запретить пользователям копировать изображение. У меня есть идея, которая может это сделать:

Я разделю изображение на части. Затем сетка изображения будет загружена в некоторые div. Таким образом, пользователь не сможет сохранить изображение. Или он/она сохранит только 1 кв. См. Части всего изображения.

Но этот план не будет работать, если некоторые мелкие части сетки не загрузятся. Итак, я хочу сделать другое. Я хочу загрузить полное изображение, а затем вырезать изображение на части. Затем покажите части в div.

Для этого необходим javascript. Но я смущен, как начать и нуждаться в вашей помощи.

Теперь вы знаете вопрос, если у вас есть идея лучше поделиться.

Заранее спасибо.

Answer 1

Трюк прост. Создайте div с фоном, являющимся изображением, которое вы хотите отобразить. Слой a div с прозрачным изображением над ним. Когда пользователь идет на сохранение изображения, он получает пробел. Запрограммируйте свой сервер, чтобы он не возвращал «прямые» запросы для изображения (так что некоторые умные люди не могут просто посмотреть на css и получить URL-адрес изображения).

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

Answer 2

TL; DR Не переусердствуйте над решением, на экране печати будет все, что вы делаете.

Вы не сможете предотвратить копирование изображения. Легко и просто. Независимо от ваших лучших усилий достаточно простого PRT SCRN и вставить в Paint.

Ваш лучший выбор - не переусердствовать и просто разместить на странице водяной знак и уведомление об авторских правах. Другие варианты могут включать размещение прозрачного <div> поверх изображения, чтобы его нельзя было щелкнуть правой кнопкой мыши и сохранить, но он все равно не помешает сохранению изображения в кеше пользователя. Или остановите их от использования инструментов разработчика или Firebug, чтобы найти исходное изображение.

Answer 3

Вы можете сделать это с помощью: http://www.pixastic.com/lib/docs/actions/crop/

Тем не менее вы должны развивать свою логику вокруг этой библиотеки.

Я сделал пример, вы можете увидеть по этой ссылке: http://simplestudio.rs/yard/crop_img/

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

Этот образ не доступен через браузер или проверяет элемент или что-то такое. Пользователь может сохранять части отдельно, но вы можете настроить мой код на кусок размером 5 пикселей, я установил его в 20x20px.

* тест сохранение изображения кусок, сделав правый щелчок в любом месте на изображении и сделав «Сохранить изображение как ..».

Также вам нужно подумать о том, как скрыть src к изображению, предоставленному php, если вам нужна помощь в этом, я могу вам помочь.