This is Yii2 wrapper for Cropper bower package Includes CutterBehavior that should be used with the widget to save cropped image into model
Widget is available for usage with the model only for now.
- Upload image
- Crop image using Cropper
- Use Imagine
- Cache sorting to subdirectories
The preferred way to install this extension is through composer.
Add to your composer.json file
"repositories": [
{
"url": "https://github.com/WondersLabCorporation/yii2-image-cutter.git",
"type": "git"
}
]and run
composer require WondersLabCorporation/yii2-image-cutter:"dev-master"
- Add to the model behavior
use WondersLabCorporation\cutter\behaviors\CutterBehavior;
public function behaviors()
{
return [
'image' => [
'class' => CutterBehavior::className(),
'attributes' => 'image',
// 'attributes' => ['image1', 'image2'],
'baseDir' => '/uploads/crop',
'basePath' => '@webroot',
],
]
}
public function rules()
{
return [
['image', 'file', 'extensions' => 'jpg, jpeg, png', 'mimeTypes' => 'image/jpeg, image/png'],
];
}- integer
attributesrequired (string/array) - Image attributes - integer
baseDirrequired - Base directory - integer
basePathrequired - Base path - integer
quality=92- Crop result quality
- Use in view
Without client validation
<div class="form-group">
<label class="control-label">Image</label>
<?= \WondersLabCorporation\cutter\Cutter::widget([
'model' => $model,
'attribute' => 'image',
'showRemoveButton' => false,
'cropperButtonsTemplate' => '{mirror} {refresh}',
'cropperButtons' => [
'mirror' => Html::a(
'<i class="glyphicon glyphicon-mirror"></i>',
'#',
[
'type' => 'button',
'data-method' => 'scaleX',
'data-option' => -1,
'class' => 'btn btn-primary',
]
)
],
]); ?>
</div>or
With client validation
<?= $form->field($model, 'image')->widget(\WondersLabCorporation\cutter\Cutter::className(), [
//options
]); ?>- model (string) (obligatory)
Defines the model that will be used to make the form input field.
- attribute (string) (obligatory)
Defines the model attribute that will be used to make de form input field.
- useWindowHeight (bool) (optional)
Use the height of the current window for the image cropping modal
- imageOptions (array) (optional)
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'].
- pluginOptions (array) (optional)
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent