lito/yii2-cropper

Yii-Framework widget for uploading and cropping images

2.0.6 2016-08-08 06:16 UTC

Requires

• bower-asset/jcrop: =0.9.12
• bower-asset/simple-ajax-uploader: @dev
• yiisoft/yii2: *
• yiisoft/yii2-imagine: *

BSD-3-Clause

• Sergey Krivochenko

• upload
• extension
• crop
• yii2

README

Yii-Framework extension for uploading and cropping images

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist lito/yii2-cropper "*"

or add

"lito/yii2-cropper": "*"

to the require section of your composer.json file.

Differences from the first version

Second version use JavaScript FileAPI for showing image without preloading to the server. Also this version has client validation.

Usage

Once the extension is installed, simply use it in your code by :

use lito\cropper\Widget;

<?php $form = ActiveForm::begin(['id' => 'form-profile']); ?>
    <?php echo $form->field($model, 'photo')->widget(Widget::className(), [
        'uploadUrl' => Url::toRoute('/user/user/uploadPhoto'),
    ]) ?>
    <div class="form-group">
        <?php echo Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
    </div>
<?php ActiveForm::end(); ?>

Widget has following properties:

In UserController:

public function actions()
{
    return [
        'uploadPhoto' => [
            'class' => 'lito\cropper\actions\UploadAction',
            'url' => 'http://your_domain.com/uploads/user/photo',
            'path' => '@frontend/web/uploads/user/photo',
        ]
    ];
}

Action has following parameters:

You can use this widget on frontend and backend. For example: user can change his userpic and administrator can change users userpic.

Operates as follows:

User click on new photo area or drag file

The picture is loaded by JavaScript FileAPI.

This picture is displayed in the widget and users have the ability to crop it or upload another picture

When the user clicks "Crop image", a request with file and coordinates is sent to the server. This picture is displayed in the form, and user can save it, or change crop area, or upload another photo.