Skip to content
Yii2 extension for cropping existing image using imgAreaSelect jquery plugin.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Yii2 Image Cropper

Latest Stable Version Total Downloads License

A simple wrapper for the imgAreaSelect jquery plugin


The preferred way to install this extension is through composer.

Either run

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

or add

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

to the require section of your composer.json file.


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

<?= \cozumel\cropper\ImageCropper::widget(); ?>


View File:

<?= \cozumel\cropper\ImageCropper::widget(['id' => 'user_profile_photo']); ?>

Where user_profile_photo is the id of the image to use.

Html in view file:

The main image you will be cropping:

<img width="<?= $width; ?>" height="<?= $height; ?>" max-width="<?=$max_width;?>" class="border" id="user_profile_photo" alt="<?=alt_text;?>" src="<?= image_source; ?>">

The preview image: (the ids here are fixed, and the 75px must be stated but can be changed)

<div style="display:none;" id="js_photo_preview">
    <div class="p_2">
      <div id="js_profile_photo_preview_container" style="position:relative; overflow:hidden; width:75px; height:75px; border:1px #000 solid;">
        <img width="<?= $width; ?>" height="<?= $height; ?>" class="border" id="js_profile_photo_preview" alt="<?=$alt_text;?>" src="<?= $image_source; ?>" style="">

The form to send the information to your controller:

$form = ActiveForm::begin(['action' => Yii::$app->urlManager->createUrl(['your/url/here']), 'options' => ['id' => 'crop_form'],
<div><input type="hidden" id="x1" value="" name="x1"></div>
<div><input type="hidden" id="y1" value="" name="y1"></div>
<div><input type="hidden" id="x2" value="" name="x2"></div>
<div><input type="hidden" id="y2" value="" name="y2"></div>
<div><input type="hidden" id="w" value="" name="w"></div>
<div><input type="hidden" id="h" value="" name="h"></div>
<div><input type="hidden" value="<?= $width; ?>" name="image_width"></div>
<div><input type="hidden" value="<?= $height; ?>" name="image_height"></div>				
<div style="margin-top:10px;">
<input type="submit" class="button" id="js_save_profile_photo" value="Save Avatar">

<?php ActiveForm::end(); ?>

Javascript to submit the form:

$(document).ready(function () {

    $(document.body).on('submit', '#crop_form', function (e) {

        var frm = $(this); //just sent text

            type: frm.attr('method'),
            url: frm.attr('action'),
            dataType: 'json',
            data: frm.serialize(),
            success: function (data) {

                if (data) {

                   //do something
        return false;


Your controller function:

$request = Yii::$app->request;

$x1 = $request->post('x1');
$x2 = $request->post('x2');
$y1 = $request->post('y1');
$y2 = $request->post('y2');

$h = $request->post('h');
$w = $request->post('w');

$image_height = $request->post('image_height');
$image_width = $request->post('image_width');

if (empty($w)) {
  //nothing selected
$image = imagecreatefromjpeg($image_source);

$width = imagesx($image);
$height = imagesy($image);

$resized_width = ((int) $x2) - ((int) $x1);
$resized_height = ((int) $y2) - ((int) $y1);

 $resized_image = imagecreatetruecolor($resized_width, $resized_height);
 imagecopyresampled($resized_image, $image, 0, 0, (int) $x1, (int) $y1, $width, $height, $width, $height);
 imagejpeg($resized_image, $image_source);
You can’t perform that action at this time.