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

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

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

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

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

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

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

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

Друзья, а есть версия под актуальную версию движка 2.15.2 со всеми имеющимися настройками поля, включая формат webp + кроп? В движке было бы конечно супер иметь такое поле

Еще от автора

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