Skip to content
Yii2 extension for cropping existing image using imgAreaSelect jquery plugin. http://odyniec.net/projects/imgareaselect/
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
ImageCropper.php
ImageCropperAsset.php
README.md
composer.json

README.md

Yii2 Image Cropper

Latest Stable Version Total Downloads License

A simple wrapper for the imgAreaSelect jquery plugin

Installation

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.

Usage

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

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

Example

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">
  <strong>Preview:</strong>
    <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="">
      </div>		
  </div>
</div>

The form to send the information to your controller:

<?php
$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">
</div>

<?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

        $.ajax({
            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
  return;
}
$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.