Cropper

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 budyaga/yii2-cropper "*"

or add

"budyaga/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 budyaga\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:

Name	Description	Default	Required
uploadParameter	Upload parameter name	file	No
width	The final width of the image after cropping	200	No
height	The final height of the image after cropping	200	No
label	Hint in box for preview	It depends on application language. You can translate this message on your language and make pull-request.	No
uploadUrl	URL for uploading and cropping image		Yes
noPhotoImage	The picture, which is used when a photo is not loaded.	You can see it on screenshots in this instructions	No
maxSize	The maximum file size (kb).	2097152	No
cropAreaWidth	Width box for preview	300	No
cropAreaHeight	Height box for preview	300	No
extensions	Allowed file extensions (string).	jpeg, jpg, png, gif	No

In UserController:

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

Action has following parameters:

Name	Description	Default	Required
path	Path for saving image after cripping		Yes
url	URL to which the downloaded images will be available.		Yes
uploadParameter	Upload parameter name. It must match the value of a similar parameter of the widget.	file	No
maxSize	The maximum file size (kb). It must match the value of a similar parameter of the widget.	2097152	No
extensions	Allowed file extensions (string). It must match the value of a similar parameter of the widget.	jpeg, jpg, png, gif	No
width	The final width of the image after cropping. It must match the value of a similar parameter of the widget.	200	No
height	The final height of the image after cropping. It must match the value of a similar parameter of the widget.	200	No

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.