Question

当我上传少于1 MB的图像时，它会成功上传并裁剪。但是当我上传的图像尺寸超过1 MB时，图像会上传但不会在选定的裁剪区域中裁剪。

从原始图像的x轴和y轴开始裁剪其他区域。这是上传的图片

请帮帮我!!

<div id="photo_container" style="height:100px;width:100%">
</div>
</div>
<!-- The popup for upload new photo -->
<div id="popup_upload">
<div class="form_upload">
<span class="close" onclick="close_popup('popup_upload')">x</span>
<h5>Upload photo</h5>
        <form action="upload_photo.php" method="post"      enctype="multipart/form-data" target="upload_frame" onsubmit="submit_photo()">
            <input type="file" name="photo" id="photo" class="file_input">
            <div id="loading_progress"></div>
            <input type="submit" value="Upload photo" id="upload_btn">
        </form>
        <iframe name="upload_frame" class="upload_frame"></iframe>
    </div>
</div>
<!-- The popup for crop the uploaded photo -->
<div id="popup_crop">
    <div class="form_crop">
        <span class="close" onclick="close_popup('popup_crop')">x</span>
        <h4>Crop photo</h4>
        <!-- This is the image we're attaching the crop to -->
        <img id="cropbox" />

        <!-- This is the form that our event handler fills -->
        <form>
            <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="hidden" id="photo_url" name="photo_url" />
            <input type="button" value="Crop Image" id="crop_btn"   onclick="crop_photo()" />
        </form>
    </div>
</div>
<script>
var TARGET_W = 600;
var TARGET_H = 600;

// show loader while uploading photo
function submit_photo() {
// display the loading texte
$('#loading_progress').html('<img src="image/loader1.gif">Uploading  wait..');
}

// show_popup : show the popup
 function show_popup(id) {
 // show the popup
 $('#'+id).show();
 }

 // close_popup : close the popup
 function close_popup(id) {
 // hide the popup
  $('#'+id).hide();
 }

 // show_popup_crop : show the crop popup
 function show_popup_crop(url) {
 // change the photo source
 $('#cropbox').attr('src', url);
 // destroy the Jcrop object to create a new one
 try {
 jcrop_api.destroy();
 } catch (e) {
 // object not defined
 }
  $('#cropbox').Jcrop({
  aspectRatio: TARGET_W / TARGET_H,  //If you want to keep aspectRatio
  setSelect:   [ 600, 600, TARGET_W, TARGET_H ],
  boxWidth: 650,   //Maximum width you want for your bigger images
  boxHeight: 400,  //Maximum Height for your bigger images
  onSelect: updateCoords 
   },function()
  {
  jcrop_api = this;
  });

  // store the current uploaded photo url in a hidden input to use it later
  $('#photo_url').val(url);
  // hide and reset the upload popup
  $('#popup_upload').hide();
  $('#loading_progress').html('');
  $('#photo').val('');

   // show the crop popup
   $('#popup_crop').show();
   }

   // crop_photo : 
    function crop_photo() {
   var x_ = $('#x').val();
   var y_ = $('#y').val();
   var w_ = $('#w').val();
   var h_ = $('#h').val();
   var photo_url_ = $('#photo_url').val();

    // hide thecrop  popup
    $('#popup_crop').hide();

    // display the loading texte
    $('#photo_container').html('<img src="image/loader1.gif" height="10%"   width="10%"> Processing...');
    // crop photo with a php file using ajax call
    $.ajax({
    url: 'crop_photo.php',
    type: 'POST',
    data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, targ_w:TARGET_W,   targ_h:TARGET_H},
    success:function(data){
     // display the croped photo
    $('#photo_container').html(data);
     }
    });
     }

   // updateCoords : updates hidden input values after every crop selection
     function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
    }
  </script>

   //this is crop_photo.php

   <?php
   // Target siz
   $targ_w = $_POST['targ_w'];
   $targ_h = $_POST['targ_h'];
   // quality
     $jpeg_quality = 90;
   // photo path
   $src = $_POST['photo_url'];
   // create new jpeg image based on the target sizes
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
    // crop photo
    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],                   $targ_w,$targ_h,$_POST['w'],$_POST['h']);
    // create the physical photo
     imagejpeg($dst_r,$src,$jpeg_quality);
    // display the  photo - "?time()" to force refresh by the browser
     echo '<img src="'.$src.'?'.time().'">';
     exit;
     ?>

 //this is upload_photo.php

     <?php
     // get the tmp url
     $name     = $_FILES['photo']['name'];
     $photo_src = $_FILES['photo']['tmp_name'];
     $size     = $_FILES['photo']['size'];
     $ext     = strtolower(pathinfo($name, PATHINFO_EXTENSION));
     // test if the photo realy exists
     $valid = true;
      if (is_file($photo_src)) {
     // photo path in our example
     $photo_dest = 'newupload/photo_'.time().'.jpg';
     // copy the photo from the tmp path to our path
     copy($photo_src, $photo_dest);
     $targetPath =  dirname( __FILE__ ) . DIRECTORY_SEPARATOR. 'newupload' .         DIRECTORY_SEPARATOR. $name;
       move_uploaded_file($photo_src,$targetPath); 
    // call the show_popup_crop function in JavaScript to display the crop popup
     echo '<script  type="text/javascript">window.top.window.show_popup_crop("'.$photo_dest.'")             </script>';
    }
   ?>

Answer 1

嘿，我得到了解决方案......

只需在jcrop中添加一个类名，并为其添加内联css ..

$('#cropbox').Jcrop({
  aspectRatio: TARGET_W / TARGET_H,
  setSelect:   [ 100, 100, 50, 50 ],
  addClass: 'jcrop-centered',
  boxWidth: 650,   //Maximum width you want for your bigger images
  boxHeight: 400,  //Maximum Height for your bigger images
  onSelect: updateCoords 
  },function()
  {

        // use the Jcrop API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];

        // Store the Jcrop API in the jcrop_api variable
        jcrop_api = this;
  });

  //add a inline style:

   .jcrop-centered
   {
   display: inline-block;
   }

大尺寸的图像在jcrop中没有正确的劈开

1 个答案: