1- Place JS and CSS files under head tag.

• jquery.min.js
• jquery.Jcrop.js
• main.css
• demos.css
• jquery.Jcrop.css

2- Also copy and paste bellow piece of javascript code under head tag.

<script type="text/javascript">

        $(function(){

        $('#cropbox').Jcrop({
        aspectRatio: 1,
        onSelect: updateCoords
        });

        });

        function updateCoords(c)
        {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
        };

        function checkCoords()
        {
        if (parseInt($('#w').val())) return true;
        alert('Please select a crop region then press submit.');
        return false;
        };

      </script>

3- Copy and paste CSS code under head code.

<style type="text/css">
        #target {
          background-color: #ccc;
          width: 500px;
          height: 330px;
          font-size: 24px;
          display: block;
        }
</style>

4- Copy and paste following HTML code inside body tag.

<div class="container">
    <div class="row">
        <div class="span12">
            <div class="jc-demo-box">
                <div class="page-header">
                    <h1>Jcrop Image Cropping</h1>
                </div>

                <!-- This is the image we're attaching Jcrop to -->
                <img src="image/sago.jpg" id="cropbox" />

                <!-- This is the form that our event handler fills -->
                <form action="crop.php" method="post" onsubmit="return checkCoords();">
                    <input type="hidden" id="x" name="x" />
                    <input type="hidden" id="y" name="y" />
                    <input type="hidden" id="w" name="w" />
                    <input type="hidden" id="h" name="h" />
                    <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
                </form>
            </div>
        </div>
    </div>
</div>

5- You can download files from file list.