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

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

softark/yii2-cropper-bs5
========================

Yii2 Bootstrap Cropper Input Widget for bootstrap 5

2.0.0(3y ago)12.0k↓33.3%MITPHPPHP >=7.0

Since Nov 11Pushed 3y agoCompare

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

READMEChangelogDependencies (4)Versions (3)Used By (0)

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

[](#yii2-cropper-bs5)

Yii2 Image Cropper Input Widget for bootstrap 5

[![](cropper-bs5.jpg)](cropper-bs5.jpg)

Features
--------

[](#features)

This is a wrapper of [fengyuanchen/Cropper.js](https://fengyuanchen.github.io/cropperjs/). It provides the following feature:

- Crop
- Image Rotate
- Image Flip
- Image Zoom
- Coordinates
- Image Sizes Info
- Base64 Data
- Set Image.Url Directly
- Set Image.Src With Javascript

Difference from bilginnet/yii2-cropper
--------------------------------------

[](#difference-from-bilginnetyii2-cropper)

This is a fork of [bilginnet/yii2-cropper](https://github.com/bilginnet/yii2-cropper), but it has some important difference:

- Works with bootstrap 5
- Improved UI design of the modal
- Supports the latest version of Cropper.js through composer
- Backward incompatibility
    - Doesn't work with bootstrap 3
    - Some incompatibility in the options

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

[](#installation)

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

Either run

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

```

or add

```
"softark/yii2-cropper-bs5": "dev-master"

```

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

Usage
-----

[](#usage)

### 1) Add aliases for image directory

[](#1-add-aliases-for-image-directory)

Add aliases for the directory to store the images in your config file.

```
       $baseUrl = str_replace('/web', '', (new Request)->getBaseUrl());

       Yii::setAlias('@imagesUrl', $baseUrl . '/images/');
       Yii::setAlias('@imagesPath', realpath(dirname(__FILE__) . '/../images/'));
       // image file will be stored in //root/images folder

       return [
           ....
       ]
```

### 2) Extend model to handle image data from cropper

[](#2-extend-model-to-handle-image-data-from-cropper)

Add a virtual attribute for the image data from the cropper widget in your model.

```
    public $_image

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

And write a function to save the image data from the cropper widget to a file.

```
    public function beforeSave($insert)
    {
        if (is_string($this->_image) && strstr($this->_image, 'data:image')) {

            // creating image file as png, for example
            // cropper sends image data in a base64 encoded string
            $data = $this->_image;
            $data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
            $fileName = time() . '-' . rand(100000, 999999) . '.png';
            file_put_contents(Yii::getAlias('@imagesPath') . '/' . $fileName, $data);

            // deleting old image file if any
            // $this->filename is the real attribute for the filename
            // customize your code for your attribute
            if (!$this->isNewRecord && !empty($this->filename)) {
                @unlink(Yii::getAlias('@imagesPath') . '/' . $this->filename);
            }

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

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

### 3) Place cropper in \_form file

[](#3-place-cropper-in-_form-file)

The following is a typical code that uses the cropper in \_form file:

```
echo $form->field($model, '_image')->widget(\softark\cropper\Cropper::class, [

    // Unique ID of the cropper. Will be set automatically if not set.
    'uniqueId' => 'image_cropper',

    // The url of the initial image.
    // You can set the current image url for update scenario, and
    // set null for create scenario.
    // Defaults to null.
    'imageUrl' => ($model->isNewRecord) ? null : Yii::getAlias('@imagesUrl') . $model->filename,

    // Cropper options
    'cropperOptions' => [
        // The dimensions of the image to be cropped and saved.
        // You have to specify both width and height.
        'width' => 1200,
        'height' => 800,

        // Preview window options
        'preview' => [
            // The dimensions of the preview image must be specified.
            'width' => 600, // you can set as string '100%'
            'height' => 400, // you can set as string '100px'
            // The url of the initial image for the preview.
            'url' => (!empty($model->filename)) ? Yii::getAlias('@imagesUrl' . '/' . $model->filename) : null,
        ],

        // Whether to use FontAwesome icons
        'useFontAwesome' => true, // default = false : use Unicode Chars
    ],

    // Modal options
    'modalOptions' => [
        // Specify the size of the modal.
        // 'modal-md', 'modal-lg', or 'modal-xl'
        // Default and recommended value is 'modal-lg'
        'modalClass' => 'modal-lg',
    ],
 ]);
```

### Options

[](#options)

While many options are supported for the widget, usually you can safely ignore them to accept the default values.

See [Options in Detail](options.md) for reference.

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity21

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.2% 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 ~1401 days

Total

2

Last Release

1338d ago

Major Versions

1.0.x-dev → 2.0.02022-09-13

### Community

Maintainers

![](https://www.gravatar.com/avatar/137fd618f00ec6d2ea604559a9c83d3ddecbd12cc8782ad04231b1cfadcacd80?d=identicon)[softark](/maintainers/softark)

---

Top Contributors

[![bilginnet](https://avatars.githubusercontent.com/u/8385372?v=4)](https://github.com/bilginnet "bilginnet (118 commits)")[![softark](https://avatars.githubusercontent.com/u/342857?v=4)](https://github.com/softark "softark (10 commits)")

---

Tags

yii2extensionwidgetcropper

### Embed Badge

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

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

###  Alternatives

[richardfan1126/yii2-js-register

Yii2 widget to register JS into view

1357.2k7](/packages/richardfan1126-yii2-js-register)

PHPackages © 2026

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