Кадрирование изображения до загрузки на сервер для Yii2

Приветствую! Отличный виджет, простой и понятный. Не подскажешь, нет ли у тебя в планах его функционал расширить? Например разрешить помещать в область, где, собственно и вырезается изображение, оригинальное изображение после обрезания и добавить возможность настроить внешний вид изображения preview в div.cropped ?

Привет!

Спасибо за приятные слова. Рад, что люди пользуются.

Функционал, в ближайшее время, думаю, что нет. Если есть желание помочь сделать его лучше - я только за. =)

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

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

$module = Yii::$app->getModule('module-name'); //здесь я получил экземпляр класса модели     
 
//здесь я обрабатываю всю полученную информацию после обрезки
$cropInfo = \yii\helpers\Json::decode($this->crop_info);
$cropInfo['dw'] = (int)$cropInfo['dw'];
$cropInfo['dh'] = (int)$cropInfo['dh'];
$cropInfo['x'] = abs($cropInfo['x']);
$cropInfo['y'] = abs($cropInfo['y']);
$cropInfo['ratio'] = $cropInfo['ratio'] == 0 ? 1.0 : (float)$cropInfo['ratio']; //вот как раз этот параметр нам необходим для обрезки сохраняя пропорцию изображения, а не обрезка под размер казанной области
 
$image = Image::getImagine()->open($this->image->tempName);
 
/*
$module->middleImageSize это массив, где [0] это ширина рамки для обрезки, [1] это высота
 
выполнив простые манипуляции с ratio мы получим размеры и точки рамки для обрезки относительно оригинального изображения,
т.е. сохраняя пропорции, а не обрежем и не ужмём изображение, как мы это видим
*/
$cropSizeLarge = new \Imagine\Image\Box($module->middleImageSize[0] / $cropInfo['ratio'], $module->middleImageSize[1] / $cropInfo['ratio']);
$cropPointLarge = new \Imagine\Image\Point($cropInfo['x'] / $cropInfo['ratio'], $cropInfo['y'] / $cropInfo['ratio']);
$pathLargeImage = Yii::getAlias($module->pathToImages) . '/' . $module->largeImagePrefix . $this->id . '.' . $this->image->getExtension(); //здесь просто путь для сохранения изображения
 
//ну и собственно обрезаем изображение
$image->copy()
    ->crop($cropPointLarge, $cropSizeLarge)
    ->save($pathLargeImage, ['quality' => $module->qualityLarge]);

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

Да не, я думаю, человек имел в виду возможность повторной обрезки уже загруженного изображения на сервер. Сейчас попытаюсь сделать на своём проекте, если получится, то могу поделиться. Правда, с yii2 я только начинаю работать серьёзно

Привет, отличное расширение! Начала прикручивать к проекту и заметила, что если горизонатльное изображение целиком поместить в область кадрирования, то на превьюхе у него пустые поля сверху и снизу. а при сохранении фотка уезжает вверх, а снизу пустое поле остается. Есть идеи, куда копнуть, чтоб сохранялась фотка также, как на првеьюхе?

Привет! Если помещать целиком в область кадрирования, то ничего уезжать не должно. Такое происходит, когда область кадрирования "нереальна", т.е. таких координат на изображении нет. Задача по кадрированию изображения за действительной областью пока в плане. Когда будет реализовано - не могу сказать. Если есть желание - можете мне помочь. =) Не забудьте только отправить пул-реквест. =)

Да, я описывалась как раз тот с случай с нереальной областью кадрирования. Если разберусь, то с удовольствием запулю)

На самом деле, почему-то мне показалось, что в превью обрезка за действительной областью работает не верно, хотя всё норм и всё корректно отображается. Поэтому, смотрите в сторону обработки изображения в afterSave(), скорее всего, нужно использовать ветвление, когда координаты x и y получаются положительными, т.е. обрезка изображения уже выполняется иначе, т.к. размеры самого изображения придется высчитывать относительно того, насколько вы далеко зашли за действительную область.

Добрый день! Пытаюсь установить ваш код с помощью composer, но выдается ошибка:

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for bupy7/yii2-widget-cropbox dev-master -> satisfiable by bupy7/yii2-widget-cropbox[dev-master].
    - bupy7/yii2-widget-cropbox dev-master requires kartik-v/yii2-icons dev-master -> no matching package found.

Potential causes:
 - A typo in the package name
 - The package is not available in a stable-enough version according to your minimum-stability setting
   see <https://groups.google.com/d/topic/composer-dev/_g3ASeIFlrc/discussion> for more details.

Read <http://getcomposer.org/doc/articles/troubleshooting.md> for further common problems.

Installation failed, reverting ./composer.json to its original content.

Проверяю тот пакет на который вы ссылаетесь есть, не могу понять в чем может быть проблема тогда((

Выполните установку снова. Сейчас должно работать.

Спасибо за виджет! Вариант для вывода в статьях сделал по приведённому примеру - всё отлично, но для thumbnails немного поизвращаться пришлось. Хотел выводить миниатюры на страницах категорий заданного размера, скажем 160*120. Проблема сохранения пропорций с обрезкой лишнего решается так: // models/Post.php

use Imagine\Image\ImageInterface;
 
public function afterSave($insert, $changedAttributes)  {
        ...
 
        // saving thumbnail-image
        $pathThumbImage = Yii::getAlias('@images/thumb/') . $this->id . '.' . $this->image->getExtension();
        $image->thumbnail(new Box(160, 120), ImageInterface::THUMBNAIL_OUTBOUND)->save($pathThumbImage, ['quality' => 100]);
 
        ...
}

Пожалуйста. =) Хороший совет для тех, кто его ищет. =)

Не забывайте оборачивать код в

~~~ [PHP] //здесь ваш код ~~~

=)

Добрый день. Виджет не работает корректно в модальном окне. Не загружается изображение в область редактирования. В чем может быть причина?

Какая версия кропера?

Лаги в хроме наблюдаются только у меня? Протестировал на нескольких машинах. В фоксе все норм, в гугле - хрень.

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

Добрый день. Настроил виджет, работает. Но появилась одна проблема, как задать для рамки кропа пропорцию, например 3,6 к 2,2. Обрезать фото после сохранения я смог, а вот именно зафиксировать область обрезания - нет

https://github.com/bupy7/yii2-widget-cropbox/issues/34

Если кому понадобится view

<?= $form2->field($category_image, 'image')->widget(CropboxWidget::className(), [
                            'croppedDataAttribute' => 'crop_info',
                            'pluginOptions' => [
                                'variants' => [
                                    [
                                        'width' => 360,
                                        'height' => 220,
                                        'minWidth' => 360,
                                        'minHeight' => 220,
                                        'maxWidth' => 360,
                                        'maxHeight' => 220,
                                    ],
                                ],
                            ],
                        ]); ?>

model

//saving thumbnail
        $newSizeThumb = new Box($cropInfo['dWidth'], $cropInfo['dHeight']);
        $cropSizeThumb = new Box(360, 220); //frame size of crop

И еще вопрос, если форма работает через pjax, как вернуть загруженное изображение. 'croppedImagesUrl' возвращает только после перезагрузки страницы

Если работает через Pjax, то должно все возвращать. Ведь это и есть фактически перезагрузка страницы. Виджет должен быть обернут полностью.

Тут проблема была в том, что имя изображения остается прежним и аякс подгружал его из кеша браузера. Если при сохранении менять имя изображения (я использовал time()), то все будет хорошо

Больше проблемы нет, получается?

для тех, кому понадобится model

public $image;
    public $crop_info;
    public $image_name;
 
    public function rules()
    {
        return [
            [
                'image',
                'image',
                'extensions' => ['jpg', 'jpeg', 'png', 'gif'],
                'mimeTypes' => ['image/jpeg', 'image/pjpeg', 'image/png', 'image/gif'],
            ],
            ['crop_info', 'safe'],
            ['src', 'safe'],
            ['image_name', 'safe'],
        ];
    }
 
 
 
 
        $pathThumbImage = Yii::getAlias('@frontend') . '/web/image/catalog/Category/'
            . 'thumb_'
            . $this->image_name
            . '.'
            . $this->image->getExtension();
 
        //saving original
        $this->image->saveAs(
            Yii::getAlias('@frontend') . '/web/image/catalog/Category/'
            . $this->image_name
            . '.'
            . $this->image->getExtension()
        );

controller

if ($category_image->load(Yii::$app->request->post())) {
            if ($category_image->src) {
                if (file_exists(Yii::getAlias(Yii::getAlias('@frontend') . '...') . $category_image->src))
                    unlink(Yii::getAlias(Yii::getAlias('@frontend') . '...') . $category_image->src);
                if (file_exists(Yii::getAlias(Yii::getAlias('@frontend') . '...') . 'thumb_' .
                    $category_image->src))
                    unlink(Yii::getAlias(Yii::getAlias('@frontend') . '...') . 'thumb_' .
                    $category_image->src);
            }
            $image = UploadedFile::getInstance($category_image, 'image');
            $category_image->image = $image;
            $category_image->category_id = $category_id;
            $image_name = time();
            $category_image->src = $image_name . '.' . $category_image->image->extension;
            $category_image->image_name = $image_name;
            if(!$category_image->save()){
                return var_dump($category_image->errors);
            }
        }

Спасибо за виджет! У меня такая проблема: Если выбрать фото и сохранить форму, не нажав кнопку Crop, то выкидывает ошибку - Length of either side cannot be 0 or negative, current size is 0x0.

Добавьте какую-нибудь проверку того, что изображение было обрезано. Вам ведь передаются данные из формы с информацией по обрезке. Декодируйте используя json_decode() и убедитесь в том, что обрезка была совершена или нет. От этого и пляшите.

Добрый день. Для чайников не подскажете. В модели ActiveRecord примеры работают?

Да, работают.

Спасибо. У меня Imagine выдает $path is empty

Создайте ишью в https://github.com/bupy7/yii2-widget-cropbox/issues с вашим кодом, чтобы можно было помочь.

Спасибо за участие! Я коряво как-то разместил.

Отредактируйте) Добавьте информацию о том, какие входящие данные, в каком месте возникает ошибка и т.п. Исходный код это просто сопровождение. Опишите проблему детально, пожалуйста.

$model->image = \yii\web\UploadedFile::getInstance($model, 'image');

$this->image->saveAs('@dusik/web/images/stadium/' . $this->image->baseName . $this->image->extension); Call to a member function saveAs() on null

В ошибке сказано, что свойство ::$image равно NULL и вызов методов невозможен.

Я в модель ActiveRecord добавил $image и $crop_info В _form.php <?= $form->field($model, 'image')->widget(CropboxWidget::className(), [ 'croppedDataAttribute' => 'crop_info',] Виджет ведет себя красиво, но в $image пусто.

Не могу вдуплиться как из виджета получить файл

Вы, скорее всего, забыли enctype:

$form = ActiveForm::begin([
    'options' => ['enctype'=>'multipart/form-data'],
]);

Спасибо добрый человек! Заработало. В эту сторону даже не думал. Теперь понимаю где тупил.