This extension is a wrapper of JavaScript-Load-Image
It's very easy to use, was made because I tried jcrop, jii-crop but it is not what I need.
Requirements ¶
Yii 1.1.x or above
Usage ¶
extract all file to application/extensions
View file:
$this->widget('ext.NavaJcrop.ImageJcrop', array(
'config' => array(
'title'=>$model->name,
'image'=>$model->image_url,//required, all field below are not required.
'id'=>'nava-jcrop',
//'unique'=>true,
'buttons'=>array(
'cancel'=>array(
'name'=>'Cancel',
'class'=>'button-crop',
'style'=>'margin-left: 5px;',
),
/*'edit'=>array(
'name'=>'Edit',
'class'=>'button-crop',
'style'=>'margin-left: 5px;',
),*/
'crop'=>array(
'name'=>'Crop',
'class'=>'button-crop',
'style'=>'margin-left: 5px;',
)
),
'options'=>array(
'imageWidth'=>150,
'imageHeight'=>175,
'resultStyle'=>'position: fixed;top: 50px;max-width:350px;max-height:350px;z-index: 9999;',
'resultMaxWidth'=>350,
'resultMinWidth'=>350,
),
'callBack'=> array(
'success'=>"function(obj,res){console.log(obj,res);}",
'error'=>"function(){alert('error');}",
)
*/
)
));
You can change the callBack:
'success'=>"function(obj,res){doSomething(obj,res);}",
and the javascript for it:
<script>
function doSomething(obj,res){ //the 'obj' is IMG tag, 'res' is base64image
$.ajax({
cache: false,
type: 'post',
url: '<?php echo Yii::app()->createUrl('site/upload');?>',
data: 'image='+res,
success: function(){
obj.attr('src',res);
}
});
}
</script>
Controller code to upload this image:
public function actionUpload(){
$model = new Model();
if(isset($_POST)){
$img = $_POST['image'];
if($img != '/img/noimage.png' && $img != $model->image_url){
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = '/uploads/images/'.$model->id.'.jpg';
$model->image_url = Yii::app()->request->hostInfo.'/'.Yii::app()->baseUrl.$file;
file_put_contents(Yii::getPathOfAlias('webroot').$file, $data);
}
}
}
Changelogs ¶
Version 0.2 ¶
- Fixed "Undefined variable: imageWidth" even you dont set 'options' in view's 'config'. Thank m3hr@n
- Do not need to click Edit button.
Screenshots ¶
Good job
Its great man.
by the way there is a little bug in your ImageJcrop.php.
you have to close the first if block in init() right after this:
$options = $this->config['options'];// line 60
I mean move '}' from line 86 to line 61. something like this:
if(isset($this->config['options'])){ $options = $this->config['options']; }// moved from line 86 to 61
then you will nerver see error like "Undefined variable: imageWidth" even you dont set 'options' in view's 'config'.
How to use with multiple images
I has been trying to make cropping on multiple images on same pages, but it doesn't work. It works on single image only.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.