Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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-&gt;Html-&gt;script(array('ckeditor/ckeditor','common'));
//echo $this-&gt;Html-&gt;css(array('jquery.validate'));
echo $this-&gt;Html-&gt;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>

HTML
<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' => '')); ?>
              <!--tab nav start-->
              <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>
                            <!--                                                        <img src="<?php echo HTTP_ROOT;?>img/sago.jpg" id="target" alt="[Jcrop Example]" />-->
                          </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>
                      <!--                                            <img src="<?php echo HTTP_ROOT;?>img/sago.jpg" id="target" alt="[Jcrop Example]" />-->
                    </div>
                  </div>
                </div>
              </section>
              <!--tab nav end-->
              <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>
<!--main content end-->




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);


};
Posted
Updated 6-May-15 14:32pm
v3

1 solution

You can use, for example, Image Magic for PHP for cropping and many other transformations:
http://php.net/manual/en/imagick.cropimage.php[^],
http://www.sitepoint.com/crop-and-resize-images-with-imagemagick[^].

—SA
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900