Изображение с возможностью обрезки на стороне клиента

+40
3.07K
Иллюстрация
Улучшение для стандартного поля «Изображение» позволяющее редактировать загруженное изображение на стороне клиента.

Теперь вы можете вырезать из загруженного изображения только нужную часть для каждого пресета. Повернуть и/или отразить его.

Установка производится стандартным способом.

Советую включать сохранение оригинального изображения. Это позволит редактировать изображения неограниченное количество раз.

Версия 0.2.1 бета (текущая)
Исправлено отображение модального окна в браузерах Google Chrome, Opera и других браузерах на основе движка WebKit.

Версия 0.2.0 бета
Код существенно переписан. Теперь дополнение расширяет возможности базового поля «Изображение»

Версия 0.1.0
Первая альфа версия выпущена, как отдельное независимое поле.


Иллюстрация
Иллюстрация
Иллюстрация

Используемая JS библиотека: Cropper.js v1.4.0 (MIT license)

Распространяется бесплатно, но вы можете угостить чашкой кофе:
Яндекс.Деньги: 41001823847377
Сбербанк (Оксана Алексеевна Ш.): 4817760099670808
WebMoney: R401209930928

Или воспользоваться хостингом по моей партнерке: beget.com/p444057

0
Def Def 3 года назад #
Вы просто мысли читаете:) Спасибо огромнющее)
0
Def Def 3 года назад #
вроде установил, но не вижу среди полей такой( не пойму что сделал не так. вроде файлы на сервере
0
Def Def 3 года назад #
нашел. все есть. но не хватает настроек обычного поля изображения - возможность загрузки по ссылке. а такжее выбора пресетов для разных выводов
0
Иван Шкута Иван Шкута 3 года назад #
Добавку по ссылке добавлю. А с пресетами... надо будет еще подумать, как это лучше реализовать.
0
Def Def 3 года назад #
исходя из пресетов скрипт как и в вк давал бы возможность выбирать область обрезки под нужные размеры пресетов.
+2
Иван Шкута Иван Шкута 3 года назад #
Да, что-то подобное и сделаю.
0
Иван Шкута Иван Шкута 3 года назад #
Уже сделано, можно обновиться.
0
Alekskrug Alekskrug 3 года назад #
Чё-то я не могу разобраться с ним
+1
Иван Шкута Иван Шкута 3 года назад #
Просто устанавливаете как любое другое дополнение и создаете новое поле "Изображение с обрезкой". Все. При создании/редактировании записи у вы сможете загрузить изображение предварительно его обрезав, как показано под спойлером.
На чем вы остановились?
0
Alekskrug Alekskrug 3 года назад #
Все разобрался
я думал что она должна в стандартных полях появиться
0
vikont vikont 3 года назад #
Спасибо Иван! Умеете порадовать, тем более, что ваши дополнения всегда выполнены на высоком уровне!
Хотелось бы узнать, можно ли ваше поле использовать в замен уже существующего, чтобы сохранилась старая информация или только для новых полей?
+2
Иван Шкута Иван Шкута 3 года назад #
Текущая версия подходит только для новых полей. После обновления постараюсь сделать так, чтобы можно было взамен.
0
vikont vikont 3 года назад #
Спасибо! буду очень ждать новой версии! Не рушить же все на старых сайтах... smile
0
Иван Шкута Иван Шкута 3 года назад #
Опубликовал обновление. Теперь дополнение не требует создания новых полей, а просто расширяет функционал существующих стандартных полей "Изображение".
+2
Александр Витальевич Александр Витальевич 3 года назад #
Спасибо, очень кстати. Только жаль нельзя применить для профилей пользователей. А так плюс!
+5
Иван Шкута Иван Шкута 3 года назад #
Для профилей тоже можно. Но вы наверное имеете ввиду аватары? Там да, тип поля не меняется, так же как и в группах обложка и превью. Если времени хватит напишу скрипт для замены.
0
Александр Витальевич Александр Витальевич 3 года назад #
да именно про ааватары я имел в виду. Было бы отлично, если реализуете!
+2
Иван Шкута Иван Шкута 3 года назад #
Готово! Теперь дополнение работает и с аватарами и с стандартными полями групп.
0
Александр Витальевич Александр Витальевич 3 года назад #
Спасибо! То есть архив обновлен? Устанавливать поверх или сначала удалить?
+1
Иван Шкута Иван Шкута 3 года назад #
Лучше сначала удалить.
+2
Василич Василич 3 года назад #
В идеале бы данный скрипт поверх стандартного поля изображение, т.е. резать изображение из стандартного поля.
И на гит )
+3
Иван Шкута Иван Шкута 3 года назад #
Именно так и сделал. При этом системные файлы не затронуты. С гитом только пока не тороплюсь, сначала надо код покрасивше сделать.
0
lakomet lakomet 3 года назад #
А можно сделать, чтоб в настройках поля, была возможность, указать фиксированные соотношения сторон для обрезки, такие как - 3:4, 16:9, "квадрат" и т.д.?
0
Иван Шкута Иван Шкута 3 года назад #
300х400, 800х450, 200х200 это пожалуй будут более точные данные. Изображение получится в точности именно такого размера.
0
lakomet lakomet 3 года назад #
Нет, нужно именно "соотношение сторон", как в этом поле. Я бы рад использовать его(я его покупал) , но оно не работает.
0
Иван Шкута Иван Шкута 3 года назад #
shock И где это может пригодиться? Картинка 3х4 пикселя и рядом картинка 30000х40000 пикселов? Зачем?
0
lakomet lakomet 3 года назад #
Иван Шкута:
Картинка 3х4 пикселя
Неее.. Вы меня не поняли. Я говорю не про размер, а про соотношение сторон(пропорции). Смотрите, есть изображения 50х75, 100х150, 200х300 в пикселях они разные, а соотношение сторон у них 2:3(два к трём). Для примера - в текущем варианте, пользователь загружает картинку, потом для прессета "большой" с размерами 600х900 пикселей(пропорция 2:3), нажимает "редактировать", при этом он может растянуть рамку обрезки, до пропорций 5:2(т.е. вытянутое по высоте), при сохранении, картинка сожмётся и выглядеть всё будет сплющено.
И ещё, модальное окно для обрезки, у меня выглядит
так
0
Иван Шкута Иван Шкута 3 года назад #
Кажется мне, что речь идет об одном и том же, да на разных языках. В данном дополнении пропорции сохраняются если указаны и ширина и высота. Пропорции могут меняться (растягиваться с изменением пропорций) если что-то одно не указано.
0
Иван Шкута Иван Шкута 3 года назад #
А вы удалили старую версию дополнения? Если нет - удалите созданные поля и все файлы старой версии (v0.1.0) и установите новую - v0.2.0. Если это не поможет пишите, будем разбираться.
0
lakomet lakomet 3 года назад #
Да, я разобрался, пропорции сохраняются, спасибо. Версию (v0.1.0) не устанавливал. Версия системы 2.10.0. Такое окно появляется на демо контенте постоянно, а при создании новой записи, такое окно появляется при первом нажатии "редактировать", если закрыть сломанное модальное окно и снова нажать "редактировать", то появляется нормальное модальное окно.
0
Иван Шкута Иван Шкута 3 года назад #
Есть вариант взглянуть? Неохота ставить сейчас экземпляр системы. У меня 2.10.1.
0
lakomet lakomet 3 года назад #
Написал в "личку"
+1
Иван Шкута Иван Шкута 3 года назад #
Да, действительно, есть такая проблема и она наблюдается в Опере, как у вас и в Хроме. Сейчас уже ухожу на выходной, после выходного исправлю. Если раньше получится, значит раньше.
-1
Андрей Андрей 3 года назад #
такая фигня со всеми модальными окнами, т.е. и в других компонентах, не знаю почему.
+1
Иван Шкута Иван Шкута 3 года назад #
Исправлено. Можете устанавливать обновление.
+4
Иван Шкута Иван Шкута 3 года назад #
Хочу обратить внимание, что текущая версия помечена, как "альфа". Сейчас я переписываю дополнение с учетом всех пожеланий. Скоро выложу новую версию.
+1
vikont vikont 3 года назад #
Тоже хочу обратить внимание, что Иван Шкута держит слово!
Теперь поле работает как улучшение стандартного!!!
Спасибо Иван! Мужик сказал - мужик сделал!!!!
0
Александр Александр 3 года назад #
Супер, а аватар в теме или только изображения?
0
vikont vikont 3 года назад #
Иван Шкута:
Готово! Теперь дополнение работает и с аватарами и с стандартными полями групп
Вот такое нашел чуток повыше smile
+1
Killer's dream Killer's dream 3 года назад #
То что доктор прописал!!!
+3
Иван Шкута Иван Шкута 3 года назад #
Тем кто уже установил дополнение, советую обновиться. В версии 0.2.0 имеется ошибка отображения модального окна с редактором изображения, когторая проявляет себя в браузерах Google Chrome, Opera и других браузерах на базе движка WebKit.
Для тех разработчиков, кто сталкивается с такой же проблемой. Размер модального окна задается яваскриптом на основании содержимого помещенного в это окно. Данная проблема лечится вызовом icms.modal.resize(); после окончания формирования контента для всплывающего окна.
+1
vikont vikont 3 года назад #
Установил последнюю версию обрезки изображений! Работает просто супер!!! Получу денежку, обязательно отблагодарю, хотя бы на кофе...

При работе обрезки заметил несколько небольших недочетов:
1. При редактировании статьи видны изображения всех включенных пресетов в типе контента, НО, приходится гадать какой именно используется в статье, а какой в списке. Так это я, админ гадаю, а что делать пользователю???
2. При редактировании изображения с правой стороны появляется светлая полоса прокрутки, которая закрывает правую границу изображения, очень неудобно.
+3
Иван Шкута Иван Шкута 3 года назад #
1. Подумаю, что можно с этим сделать.
2. Да, надо будет исправить.
0
4eremnykh 4eremnykh 3 года назад #
не решили проблему с выводом пресетов?
+1
Андрей Андрей 3 года назад #
Да и в профилях пользователей по три пресета видно, не понятно какой редактировать.
Исходя из логики, нужно предлагать юзеру обрезать тот пресет изображения, которое используется на аватаре.
А так, да, путаница возникает.
0
Def Def 3 года назад #
Протестировал сегодня. Да, засада с пресетами) как админ еще понимаю, но если бы был пользвоателем простым, то не понял бы что надо нажать на редактирвоание пресета и отредактировать его.

Логичнее как в ВК было, если загружаешь, то скрипт сразу предлагает обрезать под нужные пресеты. Сейчас же формируется 5 готовых пресетов, которые только при клике по пресету становится понятно, что можно отредактировать под себя.
0
Def Def 3 года назад #
А при пересоздании пресетов из оригинала старые удаляются или захламляют сервер?)
-2
Андрей Андрей 3 года назад #
Я думаю это не проблема с этим компонентом
0
vikont vikont 3 года назад #
Вы ошибаетесь! Те пресеты, которые не используются в самой статье, могут быть задействованы в виджетах и других дополнениях! Но сейчас, во время редактирования (создания) статьи, создается неразбериха.
Пользователи пытаются ВЫБИРАТЬ из предложенных вариантов! Они это так понимают!
+1
Иван Шкута Иван Шкута 3 года назад #
Старые изображения перезаписываются. Мусора не создается.
0
webtotma webtotma 3 года назад #
Классное дополнение. А то все руками нужные пресеты кропил, чтоб картинки эстетичными оставались.
0
4eremnykh 4eremnykh 3 года назад #
Уважаемый разраб, подскажите, не решили проблему с выводом множества пресетов? Если нет, то подскажите как удалить его полностью, чтобы поле изображение было как из коробки.
0
Эндрю Ua Эндрю Ua 3 года назад #
Это только у меня приложение работает и в профиле и в группах ?? Как то в профиле ну не очень... он подхватывает все размеры изображения и вот как выглядит:
0
kolecha kolecha 2 года назад #
При создании новостей или событий в instantmaps2
Warning: Invalid argument supplied for foreach() in ...../site.ru/templates/default/controllers/images/upload_crop.tpl.php on line 24
Грузит только оригинал.

Еще от автора

Доступность всех групп при редактировании записи
Сейчас администратор при редактировании чьей-то записи не может указать группу в которой не состоит сам.
Редирект менеджер обновлен
Наконец-то дошли руки до редирект-менеджера, вернее до его обновления. Новое: Поддержка 2.10.0+ Маски для исходного URL Переменные для целевого URL
Поле "Точка на карте"
Это поле позволяет указать точку на карте (Яндекс.Карты) и вывести карту с этой точкой в записи / профиле / группе.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.