By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,905 Members | 2,001 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,905 IT Pros & Developers. It's quick & easy.

How Do I Make The Cropping Of Image ?It Is Not Working.Please Suggest Me

P: 1
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function onFileLoad(e) {
  3.    var sradha =  $('#cropbox').html('<img src="'+e.target.result +'"/>');
  4.    alert(sradha);
  5.  
  6. }
  7.  
  8. function displayPreview(files) {
  9.     var reader = new FileReader();
  10.     reader.onload = onFileLoad;
  11.     reader.readAsDataURL(files[0]);
  12. }
  13. </script>
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  15. <script src="js/jquery.min.js"></script>
  16. <script src="js/jquery.Jcrop.js"></script>
  17. <link rel="stylesheet" href="css/demos.css" type="text/css" />
  18. <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
  19. <script type="text/javascript">
  20.  
  21.                   $(function(){
  22.  
  23.                     $('#cropbox').Jcrop({
  24.                       aspectRatio: 1,
  25.                       onSelect: updateCoords
  26.  
  27.                     });
  28.  
  29.                   });
  30.  
  31.                   function updateCoords(c)
  32.                   {
  33.                     $('#x').val(c.x);
  34.                     $('#y').val(c.y);
  35.                     $('#w').val(c.w);
  36.                     $('#h').val(c.h);
  37.  
  38.                   };
  39.  
  40.                   function checkCoords()
  41.                   {
  42.                     if (parseInt($('#w').val())) return true;
  43.                     alert('Please select a crop region then press submit.');
  44.                     return false;
  45.                   };
  46.  
  47.                 </script>
  48. <body style="text-align:center; margin-top:50px; width:50%;">
  49. <form action="" method="post" enctype="multipart/form-data" >
  50. <fieldset style="text-align:center; height:200px; color:#0000FF; height:200%; width:188%">
  51. <legend style="border: #0000CC 1px solid;"> Upload Image</legend>
  52. <table width="200" border="0" align="center" cellpadding="6px">
  53.   <tr>
  54.     <td height="20px;">Image</td>
  55.     <br/>
  56.     <td><input type="file" name="image" id="image" onChange="displayPreview(this.files);"/>
  57.     </td>
  58.   </tr>
  59.   <td id="abc"></td>
  60. </table>
  61. <br/>
  62. <input type="submit" value="submit" name="submit">
  63. <br/>
  64. <div  class="imagem_artigo" id="cropbox"></div>
  65.  
  66. <!--<img class='imagem_artigo' src="Lighthouse.jpg" id="cropbox" /> -->
  67. <form action="form.php" method="post" onSubmit="return checkCoords();" enctype="multipart/form-data" >
  68.   <input type="text" id="x" name="x" />
  69.   <input type="text" id="y" name="y" />
  70.   <input type="text" id="w" name="w" />
  71.   <input type="text" id="h" name="h" />
  72.   <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" name="submit" />
  73. <!--  <div id="sradha"> <img class='imagem_artigo' src="Lighthouse1.jpg"   /> </div>-->
  74. </form>
  75. <br>
  76. <br>
  77. </fieldset>
  78. </form>
  79. </body>
Dec 10 '14 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
please describe how it is not working.
Dec 10 '14 #2

Post your reply

Sign in to post your reply or Sign up for a free account.