Wallogit.com
2017 © Pedro Peláez
Yii-Framework widget for uploading and cropping images
Yii-Framework extension for uploading and cropping images, (*1)
The preferred way to install this extension is through composer., (*2)
Either run, (*3)
php composer.phar require --prefer-dist kuzmiand/yii2-cropper "*"
or add, (*4)
"kuzmiand/yii2-cropper": "*"
to the require section of your composer.json file., (*5)
Second version use JavaScript FileAPI for showing image without preloading to the server. Also this version has client validation., (*6)
Once the extension is installed, simply use it in your code by :, (*7)
use kuzmiand\cropper\Widget;
<?php $form = ActiveForm::begin(['id' => 'form-profile']); ?>
<?= $form->field($model, 'photo')->widget(Widget::className(), [
'uploadUrl' => Url::toRoute('/user/user/uploadPhoto'),
]) ?>
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
Widget has following properties:, (*8)
| 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:, (*9)
public function actions()
{
return [
'uploadPhoto' => [
'class' => 'kuzmiand\cropper\actions\UploadAction',
'url' => 'http://your_domain.com/uploads/user/photo',
'path' => '@frontend/web/uploads/user/photo',
]
];
}
Action has following parameters:, (*10)
| 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., (*11)
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)
Yii-Framework widget for uploading and cropping images
BSD-3-Clause
extension yii2 upload crop
Yii-Framework widget for uploading and cropping images
BSD-3-Clause
extension yii2 upload crop
Yii-Framework extension for uploading and cropping images
BSD-3-Clause
extension yii2 upload crop