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.

Monday, May 22, 2017
by bupy7
Repository
11 Watchers
85 Stars
12,969 Installations

PHP
2 Dependents
0 Suggesters
36 Forks
1 Open issues
16 Versions
7 % Grown

The README.md

yii2-widget-cropbox

, _(*1)

This is Yii2 widget wrapper for js-cropbox., _(*2)

Demo and documentation of plugin

js-cropbox Demo, _(*3)

js-cropbox README, _(*4)

Installation

The preferred way to install this extension is through composer., _(*5)

Either run, _(*6)

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

or add, _(*7)

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

to the require section of your composer.json file., _(*8)

If you use v4.1.2 then go to v4.1.2., _(*9)

If you use v3.0.1 then go to v3.0.1., _(*10)

If you use v2.2 then go to v2.2., _(*11)

If you use v1.0 then go to v1.0., _(*12)

Options

`$pluginOptions`

Contain configuration of js-cropbox wrapper., _(*13)

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

More info: https://github.com/bupy7/js-cropbox#object-variants, _(*14)

(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., _(*15)

Add in action to your controller:, _(*16)

...

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:, _(*17)

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:, _(*18)

...

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:, _(*19)

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., _(*20)

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., _(*21)

For this we will use property ratio from $cropInfo., _(*22)

$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:, _(*23)

In model:, _(*24)

...

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., _(*25)

In model:, _(*26)

// 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., _(*27)

The Versions

22/05 2017

dev-master

9999999-dev https://github.com/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.

yii2-extension 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.

bupy7/yii2-widget-cropbox

The README.md

yii2-widget-cropbox

Demo and documentation of plugin

Installation

Options

$pluginOptions

(array) $variants: Variants of cropping image.

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

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

Usage

Configuration

Preview exist image of item

Crop with save real size of image

Cropping more once option

Use resizing

License

The Versions

dev-master

The Requires

The Development Requires

by Vasilij Belosludcev

5.1.1

The Requires

The Development Requires

by Vasilij Belosludcev

5.1.0

The Requires

The Development Requires

by Vasilij Belosludcev

5.0.2

The Requires

The Development Requires

by Vasilij Belosludcev

5.0.1

The Requires

The Development Requires

by Vasilij Belosludcev

5.0.0

The Requires

by Vasilij Belosludcev

4.1.1

The Requires

by Vasilij Belosludcev

4.1.0

The Requires

by Vasilij Belosludcev

dev-dev

The Requires

by Vasilij Belosludcev

4.0.0

The Requires

by Vasilij Belosludcev

3.0.1

The Requires

by Vasilij Belosludcev

v3.0

The Requires

by Vasilij Belosludcev

v2.2

The Requires

by Vasilij Belosludcev

v2.0

The Requires

by Vasilij Belosludcev

v2.1

The Requires

by Vasilij Belosludcev

v1.0

The Requires

by Vasilij Belosludcev

`$pluginOptions`

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

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

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