alvinojutsu/yii2-image-cropper

yii2 image cropper

dev-master 2017-05-11 13:58 UTC

Requires

• bower-asset/cropper: *
• bower-asset/fontawesome: *
• yiisoft/yii2: *

MIT

• alvinux

• image
• extension
• yii2
• cropper

README

yii2 image cropper

this repo is modification from https://github.com/navatech/yii2-cropper

thanks to @lephuong

Enhancement

• Crop 1 image multiple size
• Thumbnail default size

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist alvinojutsu/yii2-image-cropper "*"

or add

"alvinojutsu/yii2-image-cropper": "*"

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

Without $model

<?= \alvinux\imagecropper\Cropper::widget([
    'name' => 'Post[picture]',
    // 'value' => 'https://fengyuanchen.github.io/cropper/images/picture.jpg', // Default blank image if not sett
    'options' => [
        ['width' => 200,'height' => 200],
        ['width' => 500,'height' => 200],
        ['width' => 500,'height' => 100],
    ],
    'showThumbnailCropper' => true, // optional, if ( showThumbnailCropper == false && autoCrop == true ) then 'hidden' else 'show',
    'autoCrop' => true, // optional, default (true), if autoCrop = 'true' there is no "Crop Image" button, if set false then you have to click 'Crop Image' button to get value
    'thumbnail' => ['width' => 250, 'height' => 250], // optional, default 150 x 150
    'pluginOptions' => [
        // https://github.com/fengyuanchen/cropper
        // Options default
        // 'autoCropArea'   => true,
        // 'strict'   => false,
        // 'guides'   => true,
        // 'highlight'   => true,
    ]
]); ?>

With $model

<?= \alvinux\imagecropper\Cropper::widget([
    'model' => $model,
    'attribute' => 'picture',
    'options' => [
        ['width' => 200,'height' => 200],
        ['width' => 500,'height' => 200],
        ['width' => 500,'height' => 100],
    ],
    'showThumbnailCropper' => true, // optional, if ( showThumbnailCropper == false && autoCrop == true ) then 'hidden' else 'show',
    'autoCrop' => true, // optional, default (true), if autoCrop = 'true' there is no "Crop Image" button, if set false then you have to click 'Crop Image' button to get value
    'thumbnail' => ['width' => 250, 'height' => 250], // optional, default 150 x 150
    'pluginOptions' => [
        //https://github.com/fengyuanchen/cropper
    ]
]); ?>

Screenshot

• Default without image
  

• With image