Yii Framework Forum: jii-jcrop - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

jii-jcrop help with implementing Rate Topic: -----

#1 User is offline   inProcess 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 22
  • Joined: 10-June 12

Posted 04 August 2012 - 04:41 PM

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;  

0

#2 User is offline   yugene 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 08-August 09

Posted 05 August 2012 - 01:35 AM

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
1

#3 User is offline   inProcess 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 22
  • Joined: 10-June 12

Posted 06 August 2012 - 01:10 AM

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

#4 User is offline   yugene 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 08-August 09

Posted 06 August 2012 - 02:06 AM

View PostinProcess, on 06 August 2012 - 01:10 AM, said:

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


0

#5 User is offline   inProcess 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 22
  • Joined: 10-June 12

Posted 06 August 2012 - 03:13 PM

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!
0

#6 User is offline   yugene 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 08-August 09

Posted 07 August 2012 - 12:09 AM

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.
0

#7 User is offline   Rivaldi 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 20-December 12

Posted 21 December 2012 - 01:38 AM

why in mine like this Undefined variable: imageUrl
0

#8 User is offline   menxaca 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 121
  • Joined: 26-November 12
  • Location:Talavera de la Reina, Spain

Posted 27 March 2013 - 04:16 PM

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!
0

#9 User is offline   yugene 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 08-August 09

Posted 28 March 2013 - 03:15 AM

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

#10 User is offline   menxaca 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 121
  • Joined: 26-November 12
  • Location:Talavera de la Reina, Spain

Posted 28 March 2013 - 07:54 AM

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!
0

#11 User is offline   yugene 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 08-August 09

Posted 28 March 2013 - 12:27 PM

View Postmenxaca, on 28 March 2013 - 07:54 AM, said:

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?

Clean up browser cache first of all, then republish assets.
What do you mean exactly by 'they don't appear in the page'?


0

#12 User is offline   menxaca 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 121
  • Joined: 26-November 12
  • Location:Talavera de la Reina, Spain

Posted 28 March 2013 - 01:57 PM

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


View Postyugene, on 28 March 2013 - 12:27 PM, said:

Clean up browser cache first of all, then republish assets.
What do you mean exactly by 'they don't appear in the page'?

0

#13 User is offline   yugene 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 492
  • Joined: 08-August 09

Posted 28 March 2013 - 02:11 PM

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.
0

#14 User is offline   menxaca 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 121
  • Joined: 26-November 12
  • Location:Talavera de la Reina, Spain

Posted 28 March 2013 - 02:44 PM

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


View Postyugene, on 28 March 2013 - 02:11 PM, said:

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.

0

#15 User is offline   menxaca 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 121
  • Joined: 26-November 12
  • Location:Talavera de la Reina, Spain

Posted 30 March 2013 - 03:35 PM

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)
Attached File  test.jpg (81.17K)
Number of downloads: 1

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!
0

#16 User is offline   menxaca 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 121
  • Joined: 26-November 12
  • Location:Talavera de la Reina, Spain

Posted 31 March 2013 - 03:13 PM

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! :)
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users