Here i have tried for image croping.The croping effect is only coming for static image but not for image after uploading.After doing for uploded image.it throws an error message jcrop is not define.Please help me.
Below is my ctp file
<pre lang="PHP">echo $this->Html->script(array('ckeditor/ckeditor','common'));
//echo $this->Html->css(array('jquery.validate'));
echo $this->Html->script(array('jquery.min.1.8.3', 'jquery.validate', 'jquery.validation.functions'));</pre>
<script src="<?php echo HTTP_ROOT;?>js/backend/jquery.Jcrop.js"></script>
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<section class="panel"> <?php echo $this->Session->flash(); ?>
<div class="panel-body">
<div class="form"> <?php echo $this->Form->create('Recipe', array('enctype' => 'multipart/form-data', 'class' => '')); ?>
<!--
<div style="clear:both;"></div>
<br clear="all"/>
<section class="panel" id="error_msg">
<header class="panel-heading tab-bg-dark-navy-blue ">
<ul class="nav nav-tabs">
<li class=""> <a data-toggle="tab" href="#upload">Upload</a> </li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content">
<div id="upload" class="tab-pane">
<div style="float:left;width:50%">
<div style="clear:both;"></div>
<br/>
<div class="form-group ">
<label for="recipeimage" class="control-label col-lg-2">Upload Recipe Image<span class="manedetory">*</span></label>
<div class="col-lg-10" style="width:83%;"> <?php echo $this->Form->input('Recipe.image', array('type' => 'file', 'label' => false, 'id' => 'recipeimge', 'required' => false, 'style' => 'border:none;width:100%;border-radius: 4px;height:34px;', 'onchange' => 'displayPreview(this.files,"recipeimge")')); ?> <span style="color:red;"># jpg,jpeg,png,gif,bmp format only</span>
<!--
</div>
<?php if (isset($getRecipe['Recipe']['image'])) { ?>
<img src="<?php echo HTTP_ROOT . RECIPE_IMAGE_THUMB . "thumb_" . $getRecipe['Recipe']['image']; ?>"/>
<?php } ?>
</div>
</div>
<div style="float: right;margin-removed 10px; margin-removed 146px; margin-removed -229px;width: 50%;">
<div id="show_selected_image"> </div>
</div>
<!--
</div>
</div>
</div>
</section>
<!--
<br clear="all" />
<div class="next_btn_st">
<?php
echo $this->Form->create('cropimage', array('enctype' => 'multipart/form-data', 'onSubmit' => 'return checkCoords();'));
echo $this->Form->input('x', array('type' => 'text', 'id' => 'x'));
echo $this->Form->input('y', array('type' => 'text', 'id' => 'y'));
echo $this->Form->input('w', array('type' => 'text', 'id' => 'w'));
echo $this->Form->input('h', array('type' => 'text', 'id' => 'h'));
echo $this->Form->submit('', array('class' => 'next_btn'));
?>
</div>
<div style="clear:both;"></div>
</form>
</div>
</div>
</section>
</div>
</div>
</section>
</section>
<!--
in##common.js file
function onFileLoad(e) {
$('#show_selected_image').html('<img id="recipeimge1" style="width:702px;height:auto;border: 1px solid #ccc;"id="target" src="'+e.target.result +'"/>');
//$('#recipeimge1').attr("src", e.target.result);
}
function displayPreview(files,id) {
//alert(id);
var value = $('#' + id).val();
var ext = value.substring(value.lastIndexOf('.') + 1);
var ext = ext.toLowerCase();
var extList = new Array;
extList = ["png", "gif", "ttf", "jpg", "jpeg", "bmp"];
if ($.inArray(ext, extList) < 0) {
$('#' + id).val('');
alert("Invalid input file format! Please upload only IMAGE file");
return false;
}
else
{
var reader = new FileReader();
reader.onload = onFileLoad;
reader.readAsDataURL(files[0]);
$('#recipeimge1').Jcrop({
aspectRatio: 1,
setSelect: [ 50, 290, 350, 10 ],
addClass: 'jcrop_custom',
bgColor: 'black',
bgOpacity: .5,
sideHandles: false,
onChange: updateCoordsf
});
return true;
}
}
function updateCoordsf(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};