Question

我正在用PHP Codeigniter进行图像裁剪，以下是我尝试过的代码。当我给出图像的路径时，代码可以正常工作，这意味着我可以选择要裁剪的图像区域。但是，当我尝试使用用户上传的图像（用户上传的图像然后裁剪）相同的代码时，我无法选择上传图像的图像区域。如何选择用户上传图片的图片区域？我正在使用JCrop插件。

imagecrop

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <title>Jcrop Dynamic Avatar JS/PHP Demo</title>
    <script type="text/javascript" 
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
    </script>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css">
    <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
    <script type="text/javascript" src="js/cropsetup.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div class="jc">
        <input type='file' name="userfile" size="20" 
         onchange="readURL(this);"/>
        <img src="#" id="target" alt="[Jcrop Example]" />
        <div id="preview-pane">
          <div class="preview-container">
            <img src="#" class="jcrop-preview" alt="Preview" />
          </div>
        </div>
        <div id="form-container">
          <form id="cropimg" name="cropimg" method="post" action="crop.php" 
           target="_blank">  
            <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" id="submit" value="Crop Image!">
          </form>
        </div>
      </div>
   </div>
  <script>function readURL(input) {
  if (input.files && input.files[0]) {
   var reader = new FileReader();
   reader.onload = function (e) {
       $('#target')
       .attr('src', e.target.result)
       .width(200)
        .height(200);
        };
        reader.readAsDataURL(input.files[0]);
    }
   }</script>
   </body>
</html>

PHP代码：

<?php
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $targ_w = $targ_h = 150;
    $jpeg_quality = 90;
    if(!isset($_POST['x']) || !is_numeric($_POST['x'])) {
      die('Please select a crop area.');
  }
  $src = 'images/cropimg.jpg';
  $img_r = imagecreatefromjpeg($src);
  $dst_r = ImageCreateTrueColor($targ_w, $targ_h);
  imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
  $targ_w,$targ_h,$_POST['w'],$_POST['h']);
  header('Content-type: image/jpeg');
  imagejpeg($dst_r,null,$jpeg_quality);
  exit;
}
?>

这是Javascript代码：

$(function($){
  var jcrop_api,
  boundx,
  boundy,
  // Grab some information about the preview pane
  $preview = $('#preview-pane'),
  $pcnt = $('#preview-pane .preview-container'),
  $pimg = $('#preview-pane .preview-container img'),
  xsize = $pcnt.width(),
  ysize = $pcnt.height();
$('#target').Jcrop({
  onChange: updatePreview,
  onSelect: updatePreview,
  bgOpacity: 0.5,
  aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
  var bounds = this.getBounds();
  boundx = bounds[0];
  boundy = bounds[1];
  jcrop_api = this; 
  $preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
  var rx = xsize / c.w;
  var ry = ysize / c.h;    
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  $pimg.css({
    width: Math.round(rx * boundx) + 'px',
    height: Math.round(ry * boundy) + 'px',
    marginLeft: '-' + Math.round(rx * c.x) + 'px',
    marginTop: '-' + Math.round(ry * c.y) + 'px'
  });
 }
}
});

Answer 1

jQuery插入ImageSelectArea对我有用！ http://odyniec.net/projects/imgareaselect/

下面提供了代码：

<html>
<link rel="stylesheet" href="css/imgareaselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.imgareaselect.js"></script> 
<body>
    <form action="crop.php" method="post" enctype="multipart/form-data">
        Upload Image: <input type="file" name="image" id="image" />
        <input type="hidden" name="x1" value="" />
        <input type="hidden" name="y1" value="" />
        <input type="hidden" name="w" value="" />
        <input type="hidden" name="h" value="" /><br><br>
        <input type="submit" name="submit" value="Submit" />
     </form>
     <p><img id="previewimage" style="display:none;"/></p>
</body>
<script>
    jQuery(function($) {
        var p = $("#previewimage");
        $("body").on("change", "#image", function(){
            var imageReader = new FileReader();
            imageReader.readAsDataURL(document.getElementById("image").files[0]); 
            imageReader.onload = function (oFREvent) {
            p.attr('src', oFREvent.target.result).fadeIn();
        };
    });
    $('#previewimage').imgAreaSelect({
        onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="w"]').val(selection.width);
            $('input[name="h"]').val(selection.height);           
        }
    });
});
</script>
</html>

如何选择要裁剪的图像区域？

1 个答案: