PHPackages                             bupy7/yii2-widget-cropbox - 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. [Image & Media](/categories/media)
4. /
5. bupy7/yii2-widget-cropbox

AbandonedArchivedYii2-extension[Image & Media](/categories/media)

bupy7/yii2-widget-cropbox
=========================

This is widget wrapper of https://github.com/bupy7/js-cropbox. This widget allows crop image before to upload to server and send informations about crop as JSON string.

5.1.1(8y ago)9156.5k↓42%33[1 PRs](https://github.com/bupy7/yii2-widget-cropbox/pulls)1BSD-3-ClausePHP

Since Jan 20Pushed 8y ago10 watchersCompare

[ Source](https://github.com/bupy7/yii2-widget-cropbox)[ Packagist](https://packagist.org/packages/bupy7/yii2-widget-cropbox)[ Docs](https://github.com/bupy7/yii2-widget-cropbox)[ RSS](/packages/bupy7-yii2-widget-cropbox/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (6)Versions (15)Used By (1)

yii2-widget-cropbox
===================

[](#yii2-widget-cropbox)

[![Latest Stable Version](https://camo.githubusercontent.com/59c7917e9a4fd023265a9608b20574c8fc057879b2142d2fee0194da06e9e567/68747470733a2f2f706f7365722e707567782e6f72672f62757079372f796969322d7769646765742d63726f70626f782f762f737461626c65)](https://packagist.org/packages/bupy7/yii2-widget-cropbox)[![Total Downloads](https://camo.githubusercontent.com/d7afec636ac6c8f72a79b53825e63ad7275e7acd10b828068f92fcc41c8860d4/68747470733a2f2f706f7365722e707567782e6f72672f62757079372f796969322d7769646765742d63726f70626f782f646f776e6c6f616473)](https://packagist.org/packages/bupy7/yii2-widget-cropbox)[![License](https://camo.githubusercontent.com/0ac1ddde574d11eaf252e9bd3aa014a56e148d722cf9d3c2285684f46e86de15/68747470733a2f2f706f7365722e707567782e6f72672f62757079372f796969322d7769646765742d63726f70626f782f6c6963656e7365)](https://packagist.org/packages/bupy7/yii2-widget-cropbox)[![Build Status](https://camo.githubusercontent.com/044954d866e82f7fafe18d84c0b3b0e9aa0bbbaed9e773d21a68a03932003da3/68747470733a2f2f7472617669732d63692e6f72672f62757079372f796969322d7769646765742d63726f70626f782e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/bupy7/yii2-widget-cropbox)[![Coverage Status](https://camo.githubusercontent.com/25d44ecf494cc4a020f1c9c56220156848d98f60aae18a71bd6ec10aad6457e4/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f62757079372f796969322d7769646765742d63726f70626f782f62616467652e7376673f6272616e63683d6d6173746572)](https://coveralls.io/github/bupy7/yii2-widget-cropbox?branch=master)

This is Yii2 widget wrapper for [js-cropbox](https://github.com/bupy7/js-cropbox).

Demo and documentation of plugin
--------------------------------

[](#demo-and-documentation-of-plugin)

[js-cropbox Demo](http://bupy7.github.io/js-cropbox/)

[js-cropbox README](https://github.com/bupy7/js-cropbox/blob/master/README.md)

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

[](#installation)

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

Either run

```
$ php composer.phar require --prefer-dist bupy7/yii2-widget-cropbox "*"

```

or add

```
"bupy7/yii2-widget-cropbox": "*"

```

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

If you use v4.1.2 then go to [v4.1.2](https://github.com/bupy7/yii2-widget-cropbox/tree/v4.1.2).

If you use v3.0.1 then go to [v3.0.1](https://github.com/bupy7/yii2-widget-cropbox/tree/v3.0.1).

If you use v2.2 then go to [v2.2](https://github.com/bupy7/yii2-widget-cropbox/tree/v2.2).

If you use v1.0 then go to [v1.0](https://github.com/bupy7/yii2-widget-cropbox/tree/v1.0).

Options
-------

[](#options)

#### `$pluginOptions`

[](#pluginoptions)

Contain configuration of js-cropbox wrapper.

##### (array) `$variants`: Variants of cropping image.

[](#array-variants-variants-of-cropping-image)

More info:

##### (array) `[$selectors]`: CSS selectors for attach events of cropbox.

[](#array-selectors-css-selectors-for-attach-events-of-cropbox)

- (string) fileInput
- (string) btnCrop
- (string) btnReset
- (string) btnScaleIn
- (string) btnScaleOut
- (string) croppedContainer
- (string) croppedDataInput
- (string) messageContainer

##### (array) `[$messages]`: Alert messages for each a variant.

[](#array-messages-alert-messages-for-each-a-variant)

Usage
-----

[](#usage)

For example, I will use **Imagine extensions for Yii2**  . You can use something other.

**Add in action to your controller:**

```
...

if ($model->load(Yii::$app->request->post()))
{
    $model->image = \yii\web\UploadedFile::getInstance($model, 'image');

    if ($model->save())
    {
        return $this->redirect(['index']);
    }
}

...
```

**Add to your view:**

```
use bupy7\cropbox\CropboxWidget;

$form = ActiveForm::begin([
    'options' => ['enctype'=>'multipart/form-data'],
]);

...

echo $form->field($model, 'image')->widget(CropboxWidget::className(), [
    'croppedDataAttribute' => 'crop_info',
]);

...
```

**Add to your model:**

```
...

use yii\helpers\FileHelper;
use yii\imagine\Image;
use yii\helpers\Json;
use Imagine\Image\Box;
use Imagine\Image\Point;

...

public $image;
public $crop_info;

...

public function rules()
{
    ...

    [
        'image',
        'image',
        'extensions' => ['jpg', 'jpeg', 'png', 'gif'],
        'mimeTypes' => ['image/jpeg', 'image/pjpeg', 'image/png', 'image/gif'],
    ],
    ['crop_info', 'safe'],

    ...
}

...

public function afterSave($insert, $changedAttributes)
{
    ...

    // open image
    $image = Image::getImagine()->open($this->image->tempName);

    // rendering information about crop of ONE option
    $cropInfo = Json::decode($this->crop_info)[0];
    $cropInfo['dWidth'] = (int)$cropInfo['dWidth']; //new width image
    $cropInfo['dHeight'] = (int)$cropInfo['dHeight']; //new height image
    $cropInfo['x'] = $cropInfo['x']; //begin position of frame crop by X
    $cropInfo['y'] = $cropInfo['y']; //begin position of frame crop by Y
    // Properties bolow we don't use in this example
    //$cropInfo['ratio'] = $cropInfo['ratio'] == 0 ? 1.0 : (float)$cropInfo['ratio']; //ratio image.
    //$cropInfo['width'] = (int)$cropInfo['width']; //width of cropped image
    //$cropInfo['height'] = (int)$cropInfo['height']; //height of cropped image
    //$cropInfo['sWidth'] = (int)$cropInfo['sWidth']; //width of source image
    //$cropInfo['sHeight'] = (int)$cropInfo['sHeight']; //height of source image

    //delete old images
    $oldImages = FileHelper::findFiles(Yii::getAlias('@path/to/save/image'), [
        'only' => [
            $this->id . '.*',
            'thumb_' . $this->id . '.*',
        ],
    ]);
    for ($i = 0; $i != count($oldImages); $i++) {
        @unlink($oldImages[$i]);
    }

    //saving thumbnail
    $newSizeThumb = new Box($cropInfo['dWidth'], $cropInfo['dHeight']);
    $cropSizeThumb = new Box(200, 200); //frame size of crop
    $cropPointThumb = new Point($cropInfo['x'], $cropInfo['y']);
    $pathThumbImage = Yii::getAlias('@path/to/save/image')
        . '/thumb_'
        . $this->id
        . '.'
        . $this->image->getExtension();

    $image->resize($newSizeThumb)
        ->crop($cropPointThumb, $cropSizeThumb)
        ->save($pathThumbImage, ['quality' => 100]);

    //saving original
    $this->image->saveAs(
        Yii::getAlias('@path/to/save/image')
        . '/'
        . $this->id
        . '.'
        . $this->image->getExtension()
    );
}

...
```

Configuration
-------------

[](#configuration)

### Preview exist image of item

[](#preview-exist-image-of-item)

If you want to show uploaded and cropped image, you must add following code:

```
echo $form->field($model, 'image')->widget(CropboxWidget::className(), [

    ...

    'croppedImagesUrl' => [
        'url/to/small/image'
    ],
    'originalImageUrl' => 'url/to/original/image',
]);
```

If you will click on preview image you see original image.

### Crop with save real size of image

[](#crop-with-save-real-size-of-image)

Difference from previous methods in that we don't resize image before crop it. We cropped image as we see it in editor box with saving real size.

For this we will use property `ratio` from `$cropInfo`.

```
$cropInfo = Json::decode($this->crop_info)[0];
$cropInfo['dWidth'] = (int)$cropInfo['dWidth'];
$cropInfo['dHeight'] = (int)$cropInfo['dHeight'];
$cropInfo['x'] = abs($cropInfo['x']);
$cropInfo['y'] = abs($cropInfo['y']);
$cropInfo['ratio'] = $cropInfo['ratio'] == 0 ? 1.0 : (float)$cropInfo['ratio'];

$image = Image::getImagine()->open($this->image->tempName);

$cropSizeLarge = new Box(200 / $cropInfo['ratio'], 200 / $cropInfo['ratio']);
$cropPointLarge = new Point($cropInfo['x'] / $cropInfo['ratio'], $cropInfo['y'] / $cropInfo['ratio']);
$pathLargeImage = Yii::getAlias('path/to/save') . '/' . $this->id . '.' . $this->image->getExtension();

$image->crop($cropPointLarge, $cropSizeLarge)
    ->save($pathLargeImage, ['quality' => $module->qualityLarge]);
```

### Cropping more once option

[](#cropping-more-once-option)

If you will set few veriants crop on plugin you need make following:

**In model:**

```
...

public function afterSave($insert, $changedAttributes)
{
    ...

    // open image
    $image = Image::getImagine()->open($this->image->tempName);

    $variants = [
        [
            'width' => 150,
            'height' => 150,
        ],
        [
            'width' => 350,
            'height' => 200,
        ],
    ];
    for($i = 0; $i != count(Json::decode($this->crop_info)); $i++) {
        $cropInfo = Json::decode($this->crop_info)[$i];
        $cropInfo['dWidth'] = (int)$cropInfo['dWidth']; //new width image
        $cropInfo['dHeight'] = (int)$cropInfo['dHeight']; //new height image
        $cropInfo['x'] = abs($cropInfo['x']); //begin position of frame crop by X
        $cropInfo['y'] = abs($cropInfo['y']); //begin position of frame crop by Y
        //$cropInfo['ratio'] = $cropInfo['ratio'] == 0 ? 1.0 : (float)$cropInfo['ratio']; //ratio image. We don't use in this example

        //delete old images
        $oldImages = FileHelper::findFiles(Yii::getAlias('@path/to/save/image'), [
            'only' => [
                $this->id . '.' . $i . '.*',
                'thumb_' . $this->id . '.' . $i . '.*',
            ],
        ]);
        for ($j = 0; $j != count($oldImages); $j++) {
            @unlink($oldImages[$j]);
        }

        //saving thumbnail
        $newSizeThumb = new Box($cropInfo['dWidth'], $cropInfo['dHeight']);
        $cropSizeThumb = new Box($variants[$i]['width'], $variants[$i]['height']); //frame size of crop
        $cropPointThumb = new Point($cropInfo['x'], $cropInfo['y']);
        $pathThumbImage = Yii::getAlias('@path/to/save/image') . '/thumb_' . $this->id . '.' . $i . '.' . $this->image->getExtension();

        $image->copy()
            ->resize($newSizeThumb)
            ->crop($cropPointThumb, $cropSizeThumb)
            ->save($pathThumbImage, ['quality' => 100]);

        //saving original
        $this->image->saveAs(Yii::getAlias('@path/to/save/image') . $this->id . '.' . $i . '.' . $this->image->getExtension());
    }
}

...
```

### Use resizing

[](#use-resizing)

If you want use resizing you need pointer min and max size of image in `variants` of `pluginOptions`.

**In model:**

```
// open image
$image = Image::getImagine()->open($this->image->tempName);

// rendering information about crop of ONE option
$cropInfo = Json::decode($this->crop_info)[0];
$cropInfo['dWidth'] = (int)$cropInfo['dWidth']; //new width image
$cropInfo['dHeight'] = (int)$cropInfo['dHeight']; //new height image
$cropInfo['x'] = abs($cropInfo['x']); //begin position of frame crop by X
$cropInfo['y'] = abs($cropInfo['y']); //begin position of frame crop by Y
$cropInfo['width'] = (int)$cropInfo['width']; //width of cropped image
$cropInfo['height'] = (int)$cropInfo['height']; //height of cropped image
// Properties bolow we don't use in this example
//$cropInfo['ratio'] = $cropInfo['ratio'] == 0 ? 1.0 : (float)$cropInfo['ratio']; //ratio image.

//delete old images
$oldImages = FileHelper::findFiles(Yii::getAlias('@path/to/save/image'), [
    'only' => [
        $this->id . '.*',
        'thumb_' . $this->id . '.*',
    ],
]);
for ($i = 0; $i != count($oldImages); $i++) {
    @unlink($oldImages[$i]);
}

//saving thumbnail
$newSizeThumb = new Box($cropInfo['dWidth'], $cropInfo['dHeight']);
$cropSizeThumb = new Box($cropInfo['width'], $cropInfo['height']); //frame size of crop
$cropPointThumb = new Point($cropInfo['x'], $cropInfo['y']);
$pathThumbImage = Yii::getAlias('@path/to/save/image') . '/thumb_' . $this->id . '.' . $this->image->getExtension();

$image->resize($newSizeThumb)
    ->crop($cropPointThumb, $cropSizeThumb)
    ->save($pathThumbImage, ['quality' => 100]);

//saving original
$this->image->saveAs(Yii::getAlias('@path/to/save/image') . $this->id . '.' . $this->image->getExtension());
```

License
-------

[](#license)

yii2-widget-cropbox is released under the BSD 3-Clause License.

###  Health Score

43

—

FairBetter than 91% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity45

Moderate usage in the ecosystem

Community24

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 96.7% 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 ~65 days

Recently: every ~2 days

Total

14

Last Release

3283d ago

Major Versions

v1.0 → v2.12015-01-21

v2.2 → v3.02015-03-14

3.0.1 → 4.0.02015-08-19

4.1.1 → 5.0.02017-05-12

### Community

Maintainers

![](https://www.gravatar.com/avatar/f2f9ee20b742a44db8870955cd27b91bb82c14e08dd61a4e096692c9d9d83302?d=identicon)[bupy7](/maintainers/bupy7)

---

Top Contributors

[![bupy7](https://avatars.githubusercontent.com/u/5145037?v=4)](https://github.com/bupy7 "bupy7 (147 commits)")[![alexjeen](https://avatars.githubusercontent.com/u/1567497?v=4)](https://github.com/alexjeen "alexjeen (1 commits)")[![bryant1410](https://avatars.githubusercontent.com/u/3905501?v=4)](https://github.com/bryant1410 "bryant1410 (1 commits)")[![manoelt](https://avatars.githubusercontent.com/u/731467?v=4)](https://github.com/manoelt "manoelt (1 commits)")[![toriphes](https://avatars.githubusercontent.com/u/4192159?v=4)](https://github.com/toriphes "toriphes (1 commits)")[![veyselsahin](https://avatars.githubusercontent.com/u/2998379?v=4)](https://github.com/veyselsahin "veyselsahin (1 commits)")

---

Tags

crop-imagewidgetyii2imageyii2extensionwidgetcrop

###  Code Quality

TestsPHPUnit

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/bupy7-yii2-widget-cropbox/health.svg)

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

###  Alternatives

[noam148/yii2-image-manager

A Yii2 module/widget for upload and cropping images

12914.8k](/packages/noam148-yii2-image-manager)[raoul2000/yii2-jcrop-widget

This extension is a wrapper for the jQuery Image Cropping Plugin (jcrop)

10248.3k2](/packages/raoul2000-yii2-jcrop-widget)[demi/cropper

Yii2 wrapper for Image Cropper javascript library

1328.7k1](/packages/demi-cropper)[bilginnet/yii2-cropper

Yii2 Bootstrap Cropper Input Widget

2232.1k](/packages/bilginnet-yii2-cropper)[maxmirazh33/yii2-uploadable-cropable-image

Yii2 extension for upload and crop images

1020.8k](/packages/maxmirazh33-yii2-uploadable-cropable-image)[noam148/yii2-image-resize

A Yii2 component for resizing images (on the fly)

1144.6k7](/packages/noam148-yii2-image-resize)

PHPackages © 2026

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