Новая версия yii2-widget-cropbox

23 окт. 2015 г., 10:55:05 Yii2 yii2 cropbox jquery image 23 Комментария

Готов сообщить радостную новость (по крайней мере для меня), что вышла новая версия кроппера 4.0.0! Лично я доволен как слон.

Изменения были очень весомые и, так как поменялась мажорная циферка в версии, тот как мы все знаем это значит, что расширение уже не совместимо с предыдущим. Поэтому, если хотите использовать в старом проекте, где была версия 3.*, то придется переписать чуточку кода.

Самое главное, что изменилось в кроппере, это то, что мной был написан jQuery плагин, что позволяет использовать кроппер не только в Yii Framework, но и в любых других проектах. В прошлых версиях я использовал обертку над одним готовым плагином для jQuery плюс некоторые дополнения в этот плагин. Но время не стоит, мы делаем код лучше и совершенствуемся. Например, после релиза плагина было замечено, что работает он в разы быстрей предыдущего.

Взять плагин можно вот здесь: https://github.com/bupy7/jquery-cropbox

Демо плагина: http://bupy7.github.io/jquery-cropbox/

Теперь, изменения плагина не затрагивает изменения в виджете. Это огромный плюс и правильный подход. Разделяй и властвуй!

Уже даже появились первые пожелания по юзабильности, а именно - сделать "умный" зум, потому что если изображения очень большое, то увеличение/уменьшение слишком медленное, что приносит неудобства. Что ж, исправим! Не все сразу. =)

Изменения в самом плагине следующие:

Масштабирование через колёсико мыши. В будущем планирую сделать публичной функцию, которая управляет масштабированием, чтобы желающие могли вешать на кнопки или еще куда-то.
Изменения размера рамки обрезки за уголок. Если изменение недоступно, то данное событие не работает. Границы изменения необходимо задавать в настройках плагина.
Возможность указать произвольный селектор до кнопки с обрезкой, выбора изображения из файла, сброса, контейнера с результатами изображений и блок с сообщениями.
Кнопка сброса имеет "память" на случай, если изображения в контейнере с результатами обрезки уже есть, а вы решили отметить свои действия. (Для этого необходимо уже обрезанные изображения помещать в контейнер с результатами указанный в настройках плагина до его инициализации.)
Ограничение за выход из действительной области изображения рамкой для обрезки.
Рабочая область кроппера резиновая, что позволяет ему подстраиваться под размер экрана, но вы всегда можете изменить это через CSS. =)

И это не предел. Дальше больше! =)

Сам виджет для Yii2 можно взять здесь: https://github.com/bupy7/yii2-widget-cropbox

Внимательно читайте README, чтоб не возникало вопросов "почему не работает", т.к. есть изменения!

Комментарии [23]

Новый комментарий

[1]

[RAIN] 01 марта 2016 г., 22:49:28

Привет! Хороший плагин.

С установкой 2-х полей на одной странице есть проблемы.

Ответить

[2]

Администратор [IAMRUSTY] 02 марта 2016 г., 0:32:53

Показывай какие =)

Ответить

[3]

[RAIN] 02 марта 2016 г., 8:20:32

Наглядно можно увидеть :-) https://yadi.sk/d/QfT5j9MlpqCjX

Вот писал уже кто-то об этом https://github.com/bupy7/jquery-cropbox/issues/4

Ответить

[4]

Администратор [IAMRUSTY] 02 марта 2016 г., 10:14:18

Хорошо, постараюсь исправить как можно раньше, или найти решение.

Ответить

[5]

[RAIN] 02 марта 2016 г., 12:04:44

Будет очень круто! Уже пару дней не могу решить эту проблему.

Ответить

[6]

Администратор [IAMRUSTY] 20 марта 2016 г., 0:01:48

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

Ответить

[7]

[RAIN] 22 марта 2016 г., 13:55:19

Привет! Спасибо за решение! Попробую на днях. Сейчас используется менее удобный плагин "yii2-cropper"

Ответить

[8]

[DENOLL] 13 июня 2016 г., 8:13:00

Добрый день. Хороший плагин, использую часто, но есть один неприятный минус. Недавно на одном из-сайтов пользователи начали жаловаться, что на ноутбуке с тачпадом, размеры изображения поменять нельзя, обязательно нужна мышка. И еще, к сожалению, для многих пользователей не очень понятно каким образом уменьшить или увеличить изображение. В первой версии у Вас были кнопки "Уменьшить", "Увеличить", их как-то вернуть возможно?

Ответить

[9]

Администратор [IAMRUSTY] 13 июня 2016 г., 14:20:53

Здравствуйте!

Спасибо за замечания. Они очень к месту.

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

Да, насчет уменьшения/увеличения с вами согласен. Но как-то вернуть пока не предстоит возможности из-за сильной загруженности, а так же пофиксить остальные баги. Есть только вариант использовать версию 3.

Ответить

[10]

[DENOLL] 14 июня 2016 г., 20:40:05

Добрый день. К сожалению в продакшене, нужно учитывать и таких пользователей. Вообще пользователи, как показывает практика, могут в "двух соснах" заблудится :-) А, что касается 3 версии, то я ее что-то не нашел, скиньте ссылку если можно, буду очень, благодарен.

Ответить

[11]

Администратор [IAMRUSTY] 14 июня 2016 г., 20:48:26

Да, согласен. Ссылка на v3.0.1.

Ответить

[12]

[DENOLL] 17 июня 2016 г., 8:51:13

Спасибо!

Ответить

[13]

[Алексей] 24 дек. 2016 г., 10:24:08

Еще бы поворот изображения сделать

Ответить

[14]

Администратор [IAMRUSTY] 05 апр. 2017 г., 12:39:11

Со временем сделаю. Сейчас очень и очень большая загруженность. В идеале в планах переписать расширение на ES6 стандарт без использования jQuery и исправить баги.

Ответить

[15]

[DEST] 04 апр. 2017 г., 3:07:56

Здравствуйте! Как можно сделать, что бы при нажатии на Crop, данные отправлялись ajax запросом? Пользуюсь виджетом для Yii2.

Ответить

[16]

Администратор [IAMRUSTY] 04 апр. 2017 г., 21:36:17

Из коробки такой возможности нет. Можно только повешать событие на клик, где будет выполняться ajax-запрос.

Ответить

[17]

[DEST] 04 апр. 2017 г., 21:58:10

Что то вроде этого? Или так не правильно будет?

$('.btn-crop').click( function(e) {
setTimeout(function() {
    e.preventDefault();
    var formData = new FormData($('form')[1]);
jQuery.ajax({
    url: '/user/upload',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',        
    success: function(data){
    }}, 5000);
});
});

Ответить

[18]

Администратор [IAMRUSTY] 05 апр. 2017 г., 9:57:17

Зачем задержка только? И вам, по сути, нужно отослать только поле, где лежит вся информация об обрезки.

Ответить

[19]

[DEST] 05 апр. 2017 г., 22:50:39

Скрытое поле с данными отправляется пустым без задержки. Как можно отправить только его?

Ответить

[20]

Администратор [IAMRUSTY] 06 апр. 2017 г., 10:58:59

Я внес изменения в сам плагин jquery-cropbox. Вам нужно подтянуть изменения из ветки dev и слушать событие cb.cropped, которое срабатывает, когда вы обрезаете изображение. Больше информации я описал в README.md этой ветки. Если все нормально работает, то я внесу изменения в виджет для Yii2.

Ответить

[21]

[DEST] 06 апр. 2017 г., 18:13:56

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

Ответить

[22]

Администратор [IAMRUSTY] 06 апр. 2017 г., 20:03:59

В README.md есть рабочий пример. Делайте по образу и подобию и все получится.

Ответить

[23]

Администратор [IAMRUSTY] 30 мая 2017 г., 16:25:38

Появилась новая версия кропера!

Ответить