jii-jcrop

Hi guys,

I have been working on getting jii-crop to work in my design for while a week or two. Please help. I have now made it to the Save button. How am I suppose to save off the cropped image??

Nothing is saving off in my model attributes.

There is my controller:




        public function actionSphoto()

        {

           

            if(isset($_POST['UserInfo'])){

               

                  $userinfo_model->cropX = $_POST['UserInfo']['cropX'];   

                  $userinfo_model->cropY = $_POST['UserInfo']['cropY'];

                  $userinfo_model->cropW = $_POST['UserInfo']['cropW'];

                  $userinfo_model->cropH = $_POST['UserInfo']['cropH'];

                  $userinfo_model->cropID = $_POST['UserInfo']['cropID'];

                 

            

            }

        }




I did not now what to put for formElementX, formElementy,formElementWidth,formElementHeight…so I just hard coded. (is that a problem?)

Here is my view:




 <?=CHtml::beginForm(array('site/sphoto'),'post',array('id' => 'uploadformc','target' => 'upload_target2'))?>

    <? //$form in this example is of type AvatarForm, containing variables for the crop area's x, y, width and height, hence the corresponding widget form element parameters ?>

    <?=CHtml::activeHiddenField($userInfo_model, 'cropID');?>

    <?=CHtml::activeHiddenField($userInfo_model, 'cropX', array('value' => '0'));?>

    <?=CHtml::activeHiddenField($userInfo_model, 'cropY', array('value' => '0'));?>

    <?=CHtml::activeHiddenField($userInfo_model, 'cropW', array('value' => '100'));?>

    <?=CHtml::activeHiddenField($userInfo_model, 'cropH', array('value' => '100'));?>

        

    <?$previewWidth = 120; $previewHeight = 140;

    $imageUrl =  Yii::app()->request->baseUrl."/images/".Yii::app()->session['profile_image'];  ?>

        

    <?$this->widget('ext.yii-jcrop.jCropWidget',array(

        'imageUrl'=>$imageUrl,

        'formElementX'=>0,

        'formElementY'=>0,

        'formElementWidth'=>100,

        'formElementHeight'=>100,

        'previewId'=>'avatar-preview', //optional preview image ID, see preview div below

        'previewWidth'=>$previewWidth,

        'previewHeight'=>$previewHeight, //'id'=>'yii-jcrop',

        'jCropOptions'=>array(

            'aspectRatio'=>1, 

            'boxWidth'=>275,

            'boxHeight'=>275,

            'setSelect'=>array(0, 0, 100, 100),

           

        ),

    ));

    

?>

  <iframe id="upload_target2" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>                 


    <div id="avatar-previewd" style="position:relative; overflow:hidden; width:<?=$previewWidth?>px; height:<?=$previewHeight?>px; margin-top: 10px; margin-bottom: 10px;">

         <img id="avatar-preview" src="<?=$imageUrl?>" style="width:100px; height:120px; margin-left:10px; margin-top:10px; margin-bottom:10px; margin-right: 10px;">

    </div>

   

      

    <?=CHtml::submitButton('Save',array('id'=>'cropButton','name' => 'submitBtn', 'value' => 'Save')); ?>             

    <?=CHtml::endForm()?>



And I have my attributes declared in my model:




        public $cropID;

        public $cropX;

        public $cropY;

        public $cropW;

        public $cropH;  



simplified version of what I have. As you’ll see, I don’t declare new class properties, but use $_POST data directly.

model (in my usage case only, most probably you'll have it in controller)



    /**

 	* Creates or updates a practice

 	*/

    public function store() {

        $prevImage = $this->image;


        $this->attributes = $_POST['Practice'];


        if (isset($_POST['ImageCropID']))

            $modelImage = Yii::app()->format->imageName(pathinfo($_POST['ImageImageUrl'], PATHINFO_BASENAME));


        if (!$this->validate())

            return false;

            

        if (isset($modelImage)) {

            $this->image = $modelImage;

            Image::cropAndResize($_POST['ImageImageUrl'], (int) $_POST['ImageCropX'], (int) $_POST['ImageCropY'], (int) $_POST['ImageCropW'], (int) $_POST['ImageCropH'],

                    self::IMG_PATH . $this->image, Image::getDimensions(get_class($this)));

            if ($prevImage)

                Image::delete(self::IMG_PATH . $prevImage);

        }

        return $this->save(false);

    }

    

view file:



    <?php

list($initialWidth, $initialHeight) = getimagesize(Yii::getPathOfAlias('webroot').$imageUrl);

     	echo CHtml::hiddenField($type.'CropID', $type.'-crop');

     	echo CHtml::hiddenField($type.'CropX', '0');

        echo CHtml::hiddenField($type.'CropY', '0');

        echo CHtml::hiddenField($type.'CropW', $imageWidth);

        echo CHtml::hiddenField($type.'CropH', $imageHeight);

        echo CHtml::hiddenField($type.'ImageUrl', $imageUrl);

        $this->widget('ext.yii-jcrop.jCropWidget',array(

        'imageUrl'=>$imageUrl,

        'formElementX'=>$type.'CropX',

        'formElementY'=>$type.'CropY',

        'formElementWidth'=>$type.'CropW',

        'formElementHeight'=>$type.'CropH',

        'previewId'=>$type.'-preview', //optional preview image ID, see preview div below

        'previewWidth'=>$imageWidth,

        'previewHeight'=>$imageHeight,

        'htmlOptions'=>array(

            'id'=>$type.'-image-for-crop',

        ),

        'jCropOptions'=>array(

                'aspectRatio'=>$imageWidth/$imageHeight,

                'bgColor'=>'transparent',

                'minSize'=>array($imageWidth, $imageHeight),

                'boxWidth'=>$initialWidth,

                'boxHeight'=>$initialHeight,

                'setSelect'=>array(0, 0, $imageWidth, $imageHeight),

        ),

        )

        );

        ?>

<h4>Result Image:</h4>

<div style="position:relative; overflow:hidden; width:<?php echo $imageWidth?>px; height:<?php echo $imageHeight?>px; margin-top: 10px; margin-bottom: 10px; border: 1px solid #ccc">

    <img id="<?php echo $type?>-preview" src="<?php echo $imageUrl?>" style="width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;">

</div>



Hope it’ll help

Yes yes it helped a Lot…also helped me to learn and discover somethings new. I am still finalizing. Do you know of a way that will stop the image from fitting to the boxWidth and boxHeight?

Very nice.

Please clarify your question…

In the JcropOptions, it looks like

whatever values I set the boxHeight

and boxWidth to be that’s how the image

will scale and the image looks distorted.

If I upload an image that’s small it gets bigger…

just had a thought maybe setting minsize and maxsize

options will help? Also still trying to sort out what goes in my

controllers versus what goes in my model?

Thanks a lot for your help!

Have you read jcrop docs? It’s very helpful and should answer most of your questions, I think.

What exactly isn’t clear about controller/model?

If something exact isn’t clear or doesn’t work please provide your code for each case.

why in mine like this Undefined variable: imageUrl

Hi All,

I need help with this extension, I don’t get this working…

I have a button that launch a modal window and here is where I want to crop the image, my problem is that the rectangle to crop the image doesn’t appear, the image does appear but not crop area.

Any helo is welcome or if you have worked with another extension, please let me know.

Here is my view:




<div class="modal-header">

        <a class="close" data-dismiss="modal">&times;</a>

        <h2>Crop this image</h2>

    </div>

     

    <div class="modal-body" id="modal-body">

        

        <?php CHtml::beginForm(array('blog/postimage/cropstore'),'post')?>

            <?php

                    $imageWidth = 100;

                    $imageHeight = 100;

                    

                Yii::log("image: ".$image, 'info' );

                

                    list($initialWidth, $initialHeight) = getimagesize(Yii::app( )->getBasePath( )."/..".$image);

                    

                Yii::log("initialWidth: ".$initialWidth, 'info' );

                Yii::log("initialHeight: ".$initialHeight, 'info' );

                Yii::log("realpath: ".Yii::app( )->getBasePath( )."/..".$image, 'info' );

                

                    echo CHtml::hiddenField('CropID', 'Ccrop');

                    echo CHtml::hiddenField('CropX', '0');

                    echo CHtml::hiddenField('CropY', '0');

                    echo CHtml::hiddenField('CropW', $imageWidth);

                    echo CHtml::hiddenField('CropH', $imageHeight);

                    echo CHtml::hiddenField('ImageUrl', Yii::app()->baseUrl.$image);

                    $this->widget('ext.yii-jcrop.jCropWidget',array(

                        'imageUrl'=>Yii::app()->baseUrl.$image,

                        'formElementX'=>'CropX',

                        'formElementY'=>'CropY',

                        'formElementWidth'=>'CropW',

                        'formElementHeight'=>'CropH',

                        'previewId'=>'preview', //optional preview image ID, see preview div below

                        'previewWidth'=>$imageWidth,

                        'previewHeight'=>$imageHeight,

                        /* 'htmlOptions'=>array(

                            'id'=>'image-for-crop',

                        ),*/

                        'jCropOptions'=>array(

                                'aspectRatio'=>$imageWidth/$imageHeight,

                                'bgColor'=>'transparent',

                                'minSize'=>array($imageWidth, $imageHeight),

                                'boxWidth'=>$initialWidth,

                                'boxHeight'=>$initialHeight,

                                'setSelect'=>array(0, 0, 100, 100),

                        ),                        

                    ));

                    ?>

            <h4>Result Image:</h4>

            <div style="position:relative; overflow:hidden; width:<?php echo $imageWidth?>px; height:<?php echo $imageHeight?>px; margin-top: 10px; margin-bottom: 10px; border: 1px solid #ccc">

                <img id="preview" src="<?php echo Yii::app()->baseUrl.$image?>" style="width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;">

            </div>

       

          

            <?php CHtml::submitButton('Save',array('id'=>'cropButton','name' => 'submitBtn', 'value' => 'Save')); ?>             

        <?php CHtml::endForm();?>

    </div>



Thanks!

I’d first of all check there’s no js errors using firebug and after that I’d check js rendered for cropping.

Hi Yugene,

There is no js errors, how can I check js rendered for cropping?

I have realized by checking the page code generated that the js files of this extension are not loaded, they are registered in the assets folder, but they don’t appear in the page once it’s loaded, any suggestion?

Thanks!

[/size]

Clean up browser cache first of all, then republish assets.

What do you mean exactly by ‘they don’t appear in the page’?

The assets get republished correctly, what I meant… By seeing the generated html code, the js files aren’t added into it, as for example the ones from Yii like:




<script type="text/javascript" src="/yii4/htdocs/assets/cdc34def/jquery.autocomplete.js"></script>

I have tried to add the js files directly, but it doesn’t work either :(

I just don’t know what else I can check, any idea?

Thanks! and sorry for my English…

Hm, can only think only of these files aren’t published at all, so I’d double check you have them called. Also please notice you may have different rendered script positions.

If register the js files directly into the page, like:




<script src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.color.js"></script>

<script src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.Jcrop.js"></script>

<script src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.Jcrop.min.js"></script>



Obviously, the js are loaded but the crop area doesn’t appear. I just think that this two lines from jCropWidget.php just does nothing because I can’t see any of these scripts loaded into the source page:




Yii::app()->clientScript->registerScript('updateCoords'.$count,$updateCoordsCode, CClientScript::POS_BEGIN);

Yii::app()->clientScript->registerScript('Yii.'.get_class($this).'#'.$id, $js, CClientScript::POS_LOAD);



It seems like any script from the widget get registered correctly :S

What do you mean "you may have different rendered script positions." ?

Thanks for your replies

Well… I have figured something out, I have a grid, each row a image with an ajax button which gets the filename in order to pass it to jii-crop widget, the js scripts weren’t loaded correctly due to renderPartial, where I had:




 echo $this->renderPartial('_crop', array('image'=>$image), true, true);



I changed to:




 echo $this->renderPartial('_crop', array('image'=>$image), false, true);



You can check the wiki, I still don’t understand completely how to use the third and fourth parameter.

And done this… Now I have another problem, once I have got the area crop displayed, when I resize this area or move, the image is distorted! (I have attached an image)

4055

test.jpg

I have checked the jcrop options from the offical website and I have no idea why this is happening, even more… because I have put the same code in a blank application and it works! so I don’t know if I have some js or something in my application that is interfering with jii-crop.

I would really appreciate some help, I have tried many options without success, maybe someone had the same problem.

Thanks in advance!

Saludos!

After trying almost everything, I realized that a property from bootstrap.css was causing this problem, so if you are using bootstrap, you will need to add into jquery.Jcrop.css the following property:




img { 

    max-width: none !important;

}



This overwrite the property max-width: 100% from bootstrap.css

Saludos! :)