lito/yii2-cropper

Yii-Framework widget for uploading and cropping images

Cropper

Yii-Framework extension for uploading and cropping images, _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

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

or add, _(*4)

"lito/yii2-cropper": "*"

to the require section of your composer.json file., _(*5)

Differences from the first version

Second version use JavaScript FileAPI for showing image without preloading to the server. Also this version has client validation., _(*6)

Usage

Once the extension is installed, simply use it in your code by :, _(*7)

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:, _(*8)

In UserController:, _(*9)

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:, _(*10)

You can use this widget on frontend and backend. For example: user can change his userpic and administrator can change users userpic., _(*11)

Operates as follows:

User click on new photo area or drag file, _(*12)

, _(*13)

The picture is loaded by JavaScript FileAPI., _(*14)

, _(*15)

This picture is displayed in the widget and users have the ability to crop it or upload another picture, _(*16)

, _(*17)

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., _(*18)

, _(*19)