PHPackages                             potime/yii2-cropper-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. potime/yii2-cropper-widget

ActiveYii2-extension[Utility & Helpers](/categories/utility)

potime/yii2-cropper-widget
==========================

Yii2 Bootstrap Cropper Input Widget

1.0.4(6y ago)115[1 issues](https://github.com/kbless/yii2-cropper-widget/issues)MITJavaScript

Since Jul 23Pushed 6y agoCompare

[ Source](https://github.com/kbless/yii2-cropper-widget)[ Packagist](https://packagist.org/packages/potime/yii2-cropper-widget)[ RSS](/packages/potime-yii2-cropper-widget/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (2)Versions (5)Used By (0)

yii2-cropper-widget
===================

[](#yii2-cropper-widget)

Yii2 Image Cropper Input Widget

[![Minimum PHP Version](https://camo.githubusercontent.com/b8feeff753e7c6ff51ffd26c612be3c4f292513e413cd0c8884e665ff51dd798/687474703a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344253230352e342d3838393242462e737667)](https://php.net/)

[Cropper.js v4.0.0](https://fengyuanchen.github.io/cropper/) - Bootstrap Cropper (recommended) (already included).

Features
--------

[](#features)

- Image Crop
- Image Rotate
- Image Flip
- Image Zoom
- Image Reset
- Coordinates
- Image Sizes Info
- Base64 Data
- Upload
- Delete Img

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

```
php composer.phar require --prefer-dist potime/yii2-cropper-widget "dev-master"

```

or add

```
"potime/yii2-cropper-widget": "dev-master"

```

to the require section of your `composer.json` file.

Usage
-----

[](#usage)

Let's add into config in your main-local config file before return\[\]

```
Yii::setAlias('@uploadPath', realpath(dirname(__FILE__).'/../../uploads/'));
```

Let's add in your model file

```
public $_image;

public function rules()
{
    return [
        ['_image', 'safe'],
    ];
}

public function beforeSave($insert)
{
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $this->_image, $result)){

        $type = $result[2];
        $data = base64_decode(str_replace($result[1], '', $this->_image));
        $path = Yii::getAlias('@uploadPath') . '/';
        if (!is_dir($path)) {
            FileHelper::createDirectory($path, 0777);
        }
        $fileName= Yii::$app->security->generateRandomString() . '.' .$type;

        if (file_put_contents($path.$fileName, $data)) {
            // deleting old image
            if (!$this->isNewRecord && !empty($this->image)) {
                @unlink($path . $this->portrait);
            }

            // set new filename
            $this->image = $fileName;
        }
    }

    parent::beforeSave($insert);
}
```

Simple usage in \_form file
---------------------------

[](#simple-usage-in-_form-file)

```
 echo $form->field($model, '_image')->widget(\potime\cropper\Cropper::className(), [
        'label' => 'Select Image',
        'imageUrl' => $model->_image,
        'cropperOptions' => [
            'width' => 255,
            'height' => 150,
            'preview' => [
                'width' => 255,
                'height' => 150,
            ],
        ],
]);
```

Advanced usage in \_form file
-----------------------------

[](#advanced-usage-in-_form-file)

```
 echo $form->field($model, '_image')->widget(\potime\cropper\Cropper::className(), [
    /*
     * elements of this widget
     *
     * buttonId          = #cropper-select-button-$uniqueId
     * previewId         = #cropper-result-$uniqueId
     * modalId           = #cropper-modal-$uniqueId
     * imageId           = #cropper-image-$uniqueId
     * inputChangeUrlId  = #cropper-url-change-input-$uniqueId
     * closeButtonId     = #close-button-$uniqueId
     * cropButtonId      = #crop-button-$uniqueId
     * browseInputId     = #cropper-input-$uniqueId // fileinput in modal
    */
    'uniqueId' => 'image_cropper', // will create automaticaly if not set
    // you can set image url directly
    // you will see this image in the crop area if is set
    // default null
    'imageUrl' => Yii::getAlias('@web/image.jpg'),

    'cropperOptions' => [
        'width' => 100, // must be specified
        'height' => 100, // must be specified
        // optional
        // url must be set in update action
        'preview' => [
            'url' => '', // (!empty($model->image)) ? Yii::getAlias('@uploadUrl/'.$model->image) : null
            'width' => 100, // must be specified // you can set as string '100%'
            'height' => 100, // must be specified // you can set as string '100px'
        ],
        // optional // default following code
        // you can customize
        'buttonCssClass' => 'btn btn-primary',
        // optional // defaults following code
        // you can customize
        // "zoom-in" => false hide button
        'icons' => [
            'browse' => '',
            'crop' => '',
            'close' => '',
            'zoom-in' => '',
            'zoom-out' => '',
            'rotate-left' => '',
            'rotate-right' => '',
            'flip-horizontal' => '',
            'flip-vertical' => '',
            'move-left' => '',
            'move-right' => '',
            'move-up' => '',
            'move-down' => '',
            'reset' => '',
            'delete' => '',
        ],
        // you can customize your upload options
        'uploadOptions'=>[
            'url'=>'/upload/base64-img',
            'response'=>'res.result.url'
        ]
    ],

    'modalOptions' => [
            'title' => 'Image Crop Editor', // Modal header Title

            'tips' => true, // default false
            'extendInfo' => true, // default false

            // optional // defaults following code
            // you can customize
            'labels' => [ // default name
                'browse' => 'Browse',
                'crop' => 'Crop & Save',
                'close' => 'Colse',
                'reset' => 'Reset',
                'delete' => 'Delete',
            ],
        ],

    // optional // defaults following code
    // you can customize
    'label' => 'Select Image',

    // optional // default following code
    // you can customize
    'template' => '{button}{preview}',
 ]);
```

jsOptions\[\]
-------------

[](#jsoptions)

```
 echo $form->field($model, '_image')->widget(\potime\cropper\Cropper::className(), [
    'cropperOptions' => [
        'width' => 100, // must be specified
        'height' => 100, // must be specified
     ],
     'jsOptions' => [
        'pos' => View::POS_END, // default is POS_END if not specified
        'onClick' => 'function(event){
              // when click crop or close button
              // do something
        }'
     ],
]);
```

Notes
-----

[](#notes)

You can set crop image directly with javascript

Sample:

```
$('button').click(function() {
   // #cropper-modal-$unique will show automatically when click the button

   // you must set uniqueId on widget
   $('#cropper-url-change-input-' + uniqueId).val('image.jpeg').trigger('change');
});

```

Thx
---

[](#thx)

[bilginnet](https://github.com/bilginnet/yii2-cropper).

[crazykun](https://github.com/crazykun/yii2-cropper).

###  Health Score

22

—

LowBetter than 22% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

4

Last Release

2485d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8db57fd77b655741e4d0e8ecf039687958511e285b084091ad36191f0663761d?d=identicon)[kbliss](/maintainers/kbliss)

---

Top Contributors

[![kbless](https://avatars.githubusercontent.com/u/7380024?v=4)](https://github.com/kbless "kbless (5 commits)")

---

Tags

yii2extensionwidgetcropper

### Embed Badge

![Health badge](/badges/potime-yii2-cropper-widget/health.svg)

```
[![Health](https://phpackages.com/badges/potime-yii2-cropper-widget/health.svg)](https://phpackages.com/packages/potime-yii2-cropper-widget)
```

###  Alternatives

[drsdre/yii2-wizardwidget

Multi step wizard widget using tabs to guide a user through steps to complete a task. Based on the Form wizard (using tabs) from lukepzak (see http://bootsnipp.com/snippets/featured/form-wizard-using-tabs).

37147.9k](/packages/drsdre-yii2-wizardwidget)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)