Cropbox help required please

Cropbox help required please

I am having problems with cropbox. The image loads ok and dragging and cropping works but not zooming in then cropping. You only get part of the image which isn't zoomed in. I can only find one example which isn't helpful. There is no image to start with until you have browsed and selected one. This is my function. Thanks




  1. $( function () {   
  2.             $('#search_image').on('change', function(){   
  3.             str = document.getElementById("search_image").value;
  4.                 var res = str.substring(str.length - 3);
  5.                 res = res.toLowerCase();   
  6.                 $( "#search_image_error" ).replaceWith( "<div class='error' id='search_image_error'></div>" );                   
  7.                 if (res == "jpg" | res == "png") {   
  8.                     var temp_files = document.getElementById("search_image");
  9.                       var files = temp_files.files;
  10.                     filesearch_image_size = files[0].size   
  11.                     if (files[0].size > 8192 * 1024) {
  12.                         $( "#search_image_error" ).replaceWith( "<div class='error' id='search_image_error'>The image is over 10mg - please use a smaller one</div>" );
  13.                         document.getElementById("search_image").value = "";
  14.                     }
  15.                     else {   
  16.                         file1_size = 0;
  17.                         file2_size = 0;
  18.                         file3_size = 0;
  19.                         file4_size = 0;
  20.                         file5_size = 0;
  21.                         file6_size = 0;   
  22.                         fileoperatorlogo_image_size = 0;
  23.                         temp_files = document.getElementById("browse_file1");
  24.                         files = temp_files.files;
  25.                        
  26.                         if (files.length > 0) {
  27.                             file1_size = files[0].size;
  28.                         }
  29.                         temp_files = document.getElementById("browse_file2");
  30.                         files = temp_files.files;
  31.                         if (files.length > 0) {
  32.                             file2_size = files[0].size;
  33.                         }
  34.                         temp_files = document.getElementById("browse_file3");
  35.                         files = temp_files.files;
  36.                         if (files.length > 0) {
  37.                             file3_size = files[0].size;
  38.                         }
  39.                         temp_files = document.getElementById("browse_file4");
  40.                         files = temp_files.files;
  41.                         if (files.length > 0) {
  42.                             file4_size = files[0].size;
  43.                         }
  44.                         temp_files = document.getElementById("browse_file5");
  45.                         files = temp_files.files;
  46.                         if (files.length > 0) {
  47.                             file5_size = files[0].size;
  48.                         }
  49.                         temp_files = document.getElementById("browse_file6");
  50.                         files = temp_files.files;
  51.                         if (files.length > 0) {
  52.                             file6_size = files[0].size;
  53.                         }
  54.                         file_total_size = file1_size + file2_size + file3_size + file4_size + file5_size + file6_size + filesearch_image_size + fileoperatorlogo_image_size;
  55.                         if (file_total_size > 8192 * 1024) {
  56.                             $( "#search_image_error" ).replaceWith( "<div class='error' id='search_image_error'>The total size of all the images to be uploaded is over 10mg - please use smaller ones or upload a few at a time</div>" );
  57.                             document.getElementById("search_image").value = "";
  58.                         }
  59.                         else {         
  60.                             var reader = new FileReader();
  61.                             reader.onload = function(e) {               
  62.                                 var image = new Image();
  63.                                 image.src = e.target.result;
  64.        
  65.                                 image.onload = function() {   
  66.                                     the_imagewidth = image.width;                                
  67.                                     the_imageheight = image.height;
  68.                                                                                
  69.                                     if (parseInt(the_imagewidth) >= 400 & parseInt(the_imageheight) >= 460) {
  70.                                         $( "#the_crop_image_remove" ).replaceWith( "" );                                               
  71.                                         $( '#cropimage' ).attr('src', e.target.result);   
  72.                                         $( '#the_crop_image' ).prepend("<a href='JavaScript: remove_search_image();' class='delete' id='the_crop_image_remove'>X</a>");
  73.                                     }
  74.                                     else {                                                                                   
  75.                                         $( "#search_image_error" ).replaceWith( "<div class='error' id='search_image_error'>The width should be at least 400px and the height at least 460px</div>" );
  76.                                         document.getElementById("search_image").value = "";
  77.                                     }                               
  78.                                 };           
  79.                              }
  80.                         }           
  81.            
  82.                         reader.readAsDataURL(this.files[0]);                   
  83.                
  84.                         $( '#cropimage' ).on('load', function() { 
  85.                             var image = $(this),
  86.                             cropwidth = image.attr('cropwidth'),
  87.                             cropheight = image.attr('cropheight'),
  88.                    
  89.                             results = image.next('.results' );       
  90.                                                
  91.                              image.cropbox( {width: cropwidth, height: cropheight, showControls: 'auto' } )
  92.                             .on('cropbox', function( event, results, img ) {
  93.                                                                
  94.                                 $("#theHiddenX").val ( results.cropX );
  95.                                 $("#theHiddenY").val ( results.cropY );
  96.                                  $("#theHiddenW").val ( results.cropW );
  97.                                  $("#theHiddenH").val ( results.cropH );         
  98.                              
  99.                             });
  100.                         } );
  101.                     }
  102.                 }
  103.                 else {                                                               
  104.                     $( "#search_image_error" ).replaceWith( "<div class='error' id='search_image_error'>Please select a valid jpg or png file</div>" );
  105.                 }               
  106.             }); 
  107.         } );