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.

extensionwidgetimagecrop

yii2-widget-cropbox

Latest Stable Version Total Downloads License Build Status Coverage Status

This is Yii2 widget wrapper for js-cropbox.

Demo and documentation of plugin

js-cropbox Demo

js-cropbox README

Installation

The preferred way to install this extension is through composer.

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.

If you use v3.0.1 then go to v3.0.1.

If you use v2.2 then go to v2.2.

If you use v1.0 then go to v1.0.

Options

$pluginOptions

Contain configuration of js-cropbox wrapper.

(array) $variants: Variants of cropping image.

More info: https://github.com/bupy7/js-cropbox#object-variants

(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.

Usage

For example, I will use Imagine extensions for Yii2 https://github.com/yiisoft/yii2-imagine . 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

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

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

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

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

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

Changelog

yii2-widget-cropbox

v5.1.1 [2017-05-22]

  • Fixed uploaded bug.

v5.1.0 [2017-05-20]

  • Update js-cropbox extension.

v5.0.2 [2017-05-13]

  • Added code fixer.
  • Removed HHVM from tests.

v5.0.1 [2017-05-13]

  • Minified resource files.
  • Added basic tests.

v5.0.0 [2017-05-12]

  • Fixed headers style of markdown. (bryant1410)
  • Removed bupy7\cropbox\Cropbox and bupy7\cropbox\MouseWheelAsset class.
  • Added bupy7\cropbox\CropboxWidget class.
  • Removed assets directory.
  • Replaced bower-asset/jq-cropbox to bower-asset/js-cropbox dependency.
  • Added jQuery wrapper for js-cropbox extension.
  • Rewrite README.md.

v4.1.2 [2016-09-28]

  • Added Spanish translation. (pablonunez-dev)

v4.1.1 [2016-05-18]

  • Added dutch translation. (alexjeen)

v4.1.0 [2016-03-20]

  • Fixed language code 'tr' to ISO standart.
  • Added translation of Portuguese language. (manoelt)

Statistics

Downloads
GitHub Stars
GitHub Forks

Releases

Comments



5.1.1 is the latest of 15 releases



BSD-3-Clause license
Stats
85 github stars & 36 github forks
13 downloads in the last day
649 downloads in the last 30 days
15194 total downloads