Yii2 widget that enhance file input with crop and zoom features., (*1)
Based on package cyneek/yii2-widget-upload-crop by Joseba JuĂĄniz., (*2)
Installation
The preferred way to install this extension is through composer., (*3)
Either run, (*4)
php composer.phar require dpodium/yii2-widget-upload-crop "*"
or add, (*5)
"dpodium/yii2-widget-upload-crop": "*"
to the require section of your composer.json file., (*6)
Usage, (*7)
This widget is ready with all required scripts in it's assets, just call the widget to render it:, (*8)
echo \dpodium\yii2\widget\upload\crop\UploadCrop::widget(
[
'form' => $form,
'model' => $fileModel,
'attribute' => 'avatar',
'maxSize' => 300,
'imageSrc' => (isset($imageSrc)) ? $$imageSrc : '',
'title' => Yii::t('admin', 'Crop photo'),
'changePhotoTitle' => Yii::t('admin', 'Change photo'),
'jcropOptions' => [
'dragMode' => 'move',
'viewMode' => 1,
'autoCropArea' => '0.1',
'restore' => false,
'guides' => false,
'center' => false,
'movable' => true,
'highlight' => false,
'cropBoxMovable' => false,
'cropBoxResizable' => false,
'background' => false,
'minContainerHeight' => 500,
'minCanvasHeight' => 400,
'minCropBoxWidth' => 200,
'minCropBoxHeight' => 200,
'responsive' => true,
'toggleDragModeOnDblclick' => false
]
]
);
-
model (string) (Mandatory), (*9)
Defines the model that will be used to make the form input field. You may use DynamicForm for it., (*10)
-
attribute (string) (Mandatory), (*11)
Defines the model attribute that will be used to make de form input field. If using dynamicform, just create a temporary attribute, eg. 'image'., (*12)
-
form (ActiveForm) (optional), (*13)
Its the ActiveForm object that defines the form in which the widget it's included. It will be used to inherit the form config when making the input field., (*14)
-
enableClientValidation (boolean) (optional), (*15)
Used when the form option it's not defined. It establishes if it's or isn't activated in the widget input fields the Yii2 javaScript client validation., (*16)
-
imageOptions (array) (optional), (*17)
List with options that will be added to the image field that will be used to define the crop data in the modal. The format should be ['option' => 'value']., (*18)
-
jcropOptions (array) (optional), (*19)
List with options that will be added in javaScript while creating the crop object. For more information about which options can be added you can read this web., (*20)
-
maxSize (integer) (optional), (*21)
Being 300 by default, it's the attribute that defines the max-height and max-width that will be applied to the preview image that it's shown after selecting a crop zone., (*22)
The form will send to the server the data this way:, (*23)
-
Image file: it must be assigned to the model attribute itself in the usual way. For example, (*24)
-
Cropping values: they will be sent to Yii 2 in array form:, (*25)
["cropping"]=>
array(4) {
["x"]=>
string(1) "12"
["width"]=>
string(3) "400"
["y"]=>
string(1) "0"
["height"]=>
string(3) "297"
}
Example
...
use yii\base\DynamicModel;
use yii\web\UploadedFile;
use yii\imagine\Image;
use Imagine\Image\Box;
...
$uploadParam = 'avatar';
$maxSize = 2097152;
$extensions = 'jpeg, jpg, png, gif';
$width = 200;
$height = 200;
if (Yii::$app->request->isPost) {
$model = new DynamicModel([$uploadParam]);
$model->load(Yii::$app->request->post());
$model->{$uploadParam} = UploadedFile::getInstance($model, $uploadParam);
$model->addRule($uploadParam, 'image', [
'maxSize' => $maxSize,
'extensions' => explode(', ', $extensions),
])->validate();
if ($model->hasErrors()) {
Yii::$app->session->setFlash("warning", $model->getFirstError($uploadParam));
} else {
$name = Yii::$app->user->id . '.png';
$cropInfo = Yii::$app->request->post('cropping');
try {
$image = Image::crop(
$model->{$uploadParam}->tempName,
intval($cropInfo['width']),
intval($cropInfo['height']),
[$cropInfo['x'], $cropInfo['y']]
)->resize(
new Box($width, $height)
);
} catch (\Exception $e) {
Yii::$app->session->setFlash("warning", $e->getMessage());
}
//upload and save db
$path = 'images/'.$name;
if (isset($image) && $image->save($path)) {
...
//store your image info to db here
...
Yii::$app->session->setFlash("success", Yii::t('alert', 'Avatar upload success.'));
} else {
Yii::$app->session->setFlash("warning", Yii::t('alert', 'Avatar upload failed.'));
}
}
return $this->redirect(['account/index']);
} else {
throw new BadRequestHttpException(Yii::t('cropper', 'ONLY_POST_REQUEST'));
}
Wallogit.com
