PHPackages                             coldlook/yii2-cropper - 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. coldlook/yii2-cropper

ActiveYii2-extension

coldlook/yii2-cropper
=====================

Yii2 Bootstrap Cropper Input Widget \[yii2图片裁剪插件\]

v1.2(7y ago)3220↓100%2MITJavaScript

Since Sep 3Pushed 7y ago1 watchersCompare

[ Source](https://github.com/crazykun/yii2-cropper)[ Packagist](https://packagist.org/packages/coldlook/yii2-cropper)[ RSS](/packages/coldlook-yii2-cropper/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (3)Dependencies (2)Versions (4)Used By (0)

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

[](#yii2-cropper)

Yii2 Image Cropper InputWidget

[![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 图片base64编码
- Upload 图片上传
- Delete Img 删除图片

Demo images
-----------

[](#demo-images)

[![效果图](https://raw.githubusercontent.com/crazykun/yii2-cropper/master/demo.png)](https://raw.githubusercontent.com/crazykun/yii2-cropper/master/demo.png)

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

[](#installation)

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

Either run

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

```

or add

```
"coldlook/yii2-cropper": "dev-master"

```

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

Usage
-----

[](#usage)

Let's add in your controller file

```
    public function actionBase64Img(){
        $image=$this->param('image');
        $fileName=$this->save_base64_image($image);
        if(!$fileName){
            return $this->ajaxMessage(1,'上传失败');
        }
        $successPath = Yii::$app->params['imageUploadSuccessPath'] . date('Ymd') . '/';

        if ($successPath === false) {
            return $this->ajaxMessage(1,'上传失败');
        }else{
            return $this->ajaxMessage(0,'上传成功',[
                'url' => $successPath,
                'attachment' => $successPath
            ]);
        }
    }

    /**
     * [将Base64图片转换为本地图片并保存]
     * @param  [Base64] $save_base64_image [要保存的Base64]
     * @param  [目录] $path [要保存的路径]
     */
    public function save_base64_image($base64_image_content,$path=''){
        if(!$path){
            $path = Yii::$app->params['imageUploadRelativePath'] . date('Ymd') . '/';
        }
        //匹配出图片的格式
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
            $type = $result[2];
            if (!is_dir($path)) {
                FileHelper::createDirectory($path, 0777);
            }
            $fileName= date('YmdHis') . rand(100000, 999999). '.' .$type;

            if (file_put_contents($path.$fileName, base64_decode(str_replace($result[1], '', $base64_image_content)))){
                return $fileName;
            }else{
                return false;
            }
        }else{
            return false;
        }
    }
```

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

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

```
 echo $form->field($model, '_image')->widget(\coldlook\cropper\Cropper::className(), [
        'label' => '选择图片',
        'imageUrl' => $model->_image,
        'cropperOptions' => [
            'width' => 255,
            'height' => 150,
            'preview' => [
                'width' => 255,
                'height' => 150,
            ],
        ],
        'uploadOptions'=>[
            'url'=>'/admin/upload/base64-img',
            'response'=>'res.result.url'
        ]
]);
```

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

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

```
 echo $form->field($model, '_image')->lable("封面图1(非必填,尺寸:宽*高 建议尺寸225px*150px)")->widget(\coldlook\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
        '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'
        ]
    ],

    // optional // defaults following code
    // you can customize
    'label' => '选择图片',

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

 ]);
```

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

[](#jsoptions)

```
 echo $form->field($model, '_image')->widget(\coldlook\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).

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community5

Small or concentrated contributor base

Maturity64

Established project with proven stability

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 ~1 days

Total

3

Last Release

2802d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6ce35b65b97798760925d15b3e860e061fa4aa07908da3493a2335524d685287?d=identicon)[coldlook](/maintainers/coldlook)

---

Tags

cropperphpyii2yii2extensionwidgetcropper

### Embed Badge

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

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

###  Alternatives

[bilginnet/yii2-cropper

Yii2 Bootstrap Cropper Input Widget

2232.1k](/packages/bilginnet-yii2-cropper)[skeeks/cms

SkeekS CMS — control panel and tools based on php framework Yii2

13825.6k46](/packages/skeeks-cms)

PHPackages © 2026

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