Блог хеллоуворлдщика

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


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

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

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

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

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

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

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

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

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

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

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

share via vkontakte share via facebook share via mailru share via odnoklassniki share via twitter

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо!

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

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

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

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

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

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

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

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

[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);
});
});
Администратор [BUPY7] 05 апр. 2017 г., 9:57:17

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

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

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

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

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

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

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

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

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