Question

我搜索了简单的图像裁剪，我发现了一个，我研究了所有部分，现在我想添加一些功能，这个功能是选择一个图像并立即显示它我得到它，但我有一个有点混乱的问题，问题是在选择图像后它没有显示图像的原始尺寸。

的index.php

    <!DOCTYPE html>
    <html lang="en">
       <head>
       <meta http-equiv="Content-type" content="text/html;charset=utf-8">
       <title>Jcrop Dynamic Avatar JS/PHP Demo</title>
       <link rel="shortcut icon" href="http://teamtreehouse.com/assets/favicon.ico">
       <link rel="icon" href="http://teamtreehouse.com/assets/favicon.ico">
       <link rel="stylesheet" type="text/css" href="css/styles.css">
       <link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css">
       <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Wellfleet">
       <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
       <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
       <script type="text/javascript" src="js/cropsetup.js"></script>
       <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
       <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
       <!--This is what i add---->
       <script>
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                       $('.sep').attr('src', e.target.result);
                        $('.jcrop-preview').attr('src', e.target.result);                       
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
       </script>
        <!--END---->
       </head>

       <body>
       <div id="wrapper">
         <div class="jc-demo-box">
           <header>
             <h1><span>Create your profile</span></h1>
           </header>
           <div id="ew" style="width: 500px; height:500px; background: rgb(102,102,102);"> 
            <img src="" id="target" class="sep" alt="crop image"/> //THIS IS THE IMAGE I WANT TO SHOW THE ORIGINAL SIZE AFTER SELECTING FROM FILES
</div>
           <div id="button_upload"><span>Select Image</span>
             <input type="file" name="fileToUpload" id="fileToUpload" onchange="readURL(this);">
           </div>
           <div id="mo">
           <div id="preview-pane">
             <div class="preview-container">
               <div id="ew2"> <img src="" class="jcrop-preview" alt="Preview" /> </div>
             </div>
           </div>
           </div>
           <!-- @end #preview-pane -->
           <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>
           <!-- @end #form-container --> 
         </div>
         <!-- @end .jc-demo-box --> 
       </div>
       <!-- @end #wrapper -->
       </body>
    </html>

CROPSETUP.JS

$(function($){
  // Create variables (in this scope) to hold the API and image size
  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; // Store the API in the jcrop_api variable

    // Move the preview into the jcrop container for css positioning
    $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'
      });
    }
  }

});

**另外如何在提交后保存图像？这是提交的代码，但我在裁剪后获取图像失败。

CROP.PHP

<?php


if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $targ_w = $targ_h = 180;
    $jpeg_quality = 90;

    if(!isset($_POST['x']) || !is_numeric($_POST['x'])) {
      die('Please select a crop area.');
    }

    $src = //This where i want to put the image after scrop but i dont know  how
    $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); // NULL will output the image directly

    exit;
}

?>

感谢!!!

显示原始尺寸的选择图像

0 个答案: