问如何选择图片的裁剪区域？
EN

Stack Overflow用户

提问于 2018-07-17 08:01:05

回答 0查看 2.3K关注 0票数 0

我正在用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'
  });
 }
}
});

php

codeigniter

jcrop

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51371492

复制

相似问题

问如何选择图片的裁剪区域？
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何选择图片的裁剪区域？EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何选择图片的裁剪区域？
EN