Skip to content
Browse files

Preview support added

  • Loading branch information...
1 parent 97cbb57 commit cc6a866fb0387a29b05569176c6fbd57d29a79ca @Toumal committed
Showing with 50 additions and 4 deletions.
  1. +35 −0 jCropWidget.php
  2. +14 −3 readme.txt
  3. +1 −1 views/jcrop.php
View
35 jCropWidget.php
@@ -40,6 +40,25 @@ class jCropWidget extends CWidget {
*/
public $formElementHeight;
+
+ /**
+ * The image id of a preview box
+ * @var string $previewId
+ */
+ public $previewId;
+
+ /**
+ * Preview box width
+ * @var int $previewWidth
+ */
+ public $previewWidth;
+
+ /**
+ * Preview box height
+ * @var int $previewHeight
+ */
+ public $previewHeight;
+
/**
* key => value options that are rendered into the <img> tag
* @var array
@@ -77,6 +96,12 @@ public function run() {
} else {
$id = 'yii-jcrop';
}
+ if (!$this->previewId) {
+ $this->previewId = $id.'-preview';
+ $this->previewWidth = 100;
+ $this->previewHeight = 100;
+ }
+
$id.= '-'.$count;
$this->htmlOptions['id'] = $id;
@@ -93,6 +118,16 @@ function updateCoords{$count}(c)
jQuery('#{$this->formElementY}').val(c.y);
jQuery('#{$this->formElementWidth}').val(c.w);
jQuery('#{$this->formElementHeight}').val(c.h);
+ var rx = {$this->previewWidth} / c.w;
+ var ry = {$this->previewHeight} / c.h;
+ if ($('#{$this->previewId}') != undefined) {
+ $('#{$this->previewId}').css({
+ width: Math.round(rx * $('#{$id}').width() ) + 'px',
+ height: Math.round(ry * $('#{$id}').height()) + 'px',
+ marginLeft: '-' + Math.round(rx * c.x) + 'px',
+ marginTop: '-' + Math.round(ry * c.y) + 'px'
+ });
+ }
};
EOF;
View
17 readme.txt
@@ -9,6 +9,7 @@ This extension offers a non-intrusive yii extension that allows you to use the J
I say unintrusive because other extensions auto-insert the form fields and buttons for you, which in many cases might not be what you want.
This extension focuses on the minimum required to get you up and running, letting you do your own bells and whistles if you want to.
+Optionally, this extension supports a preview of the cropped image that is dynamically updated as you move the selection rectangle.
Usage:
======
@@ -25,14 +26,17 @@ This is an example view that uses the widget:
<?=CHtml::activeHiddenField($form, 'cropY', array('value' => '0'));?>
<?=CHtml::activeHiddenField($form, 'cropW', array('value' => '100'));?>
<?=CHtml::activeHiddenField($form, 'cropH', array('value' => '100'));?>
-<?$this->widget('ext.yii-jcrop.jCropWidget',array(
- 'imageUrl'=>CHtml::normalizeUrl(array('/path/to/image.jpg')),
+<?$previewWidth = 100; $previewHeight = 100;?>
+<?$this->widget('ext.jcrop.jCropWidget',array(
+ 'imageUrl'=>$imageUrl,
'formElementX'=>'AvatarForm_cropX',
'formElementY'=>'AvatarForm_cropY',
'formElementWidth'=>'AvatarForm_cropW',
'formElementHeight'=>'AvatarForm_cropH',
+ 'previewId'=>'avatar-preview', //optional preview image ID, see preview div below
+ 'previewWidth'=>$previewWidth,
+ 'previewHeight'=>$previewHeight,
'jCropOptions'=>array(
- //See the jCrop manual for available jCrop parameters
'aspectRatio'=>1,
'boxWidth'=>400,
'boxHeight'=>400,
@@ -41,6 +45,13 @@ This is an example view that uses the widget:
)
);
?>
+
+<!-- Begin optional preview box -->
+<div 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: 0px; height: 0px; margin-left: 0px; margin-top: 0px;">
+</div>
+<!-- End optional preview box -->
+
<?=CHtml::submitButton('Crop Avatar'); ?>
<?=CHtml::endForm()?>
View
2 views/jcrop.php
@@ -1 +1 @@
-<?php echo CHtml::image($url, $alt, $htmlOptions);
+<?php echo CHtml::image($url, $alt, $htmlOptions);?>

0 comments on commit cc6a866

Please sign in to comment.
Something went wrong with that request. Please try again.