The result of the cropped image appears gray

0

I'm trying to make a system in which the user selects the image, so it cuts out and in the end it has to appear in my folder the cropped image ... Thanks in advance!

<!DOCTYPEhtml><html><head><title>Image</title><metacharset="UTF-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="animate.js"></script>
   <script src="nham/js/jquery.min.js"></script>
   <script src="nham/js/jquery.Jcrop.min.js"></script>
   <link rel="stylesheet" href="nham/css/jquery.Jcrop.css" type="text/css" />
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="user-image">
      <form method="POST" action="upload.php" enctype="multipart/form-data">
        <img id="uploadPreview" width="50%" height="40%"/>
        <input type="file" id="image" name="img" accept="image" onchange="PreviewImage();"><br>
        <label for="image" class="label">Selecionar Imagem</label>
        <label for="image" class="label2">Selecionar outra Imagem</label>
        <input type="submit" id="select_crop" value="Recortar Imagem!" ><br><br><br><br>

        <!-- cooordenadas da cortagem -->
        <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" />                                                                                      
        <script type="text/javascript">

            function PreviewImage() {
                var ofreader = new FileReader();
                ofreader.readAsDataURL(document.getElementById("image").files[0]);
                ofreader.onload = function(ofrevent) {
                    document.getElementById("uploadPreview").src = ofrevent.target.result;
                }
            }

            function setInfo(c) {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            }
        </script>
    </form>
</div>

var main = function() {

  $(".label2").hide();
  $("#select_crop").hide();

  $('#image').change(function() {
      var jcrop;
      $(".label").hide(200);
      $(".label2").css({"visibility": "visible"});
      $(".label2").fadeIn(200);
      $("#select_crop").fadeIn(200);
      $('#uploadPreview').css({"visibility": "visible"});
      $('#ranger').css({"visibility": "visible"});
      setTimeout(function() {
          $('#uploadPreview').Jcrop({
              onSelect: setInfo,
              minSize: [100, 100],
              maxSize: [300, 300],
              aspectRatio: 1,
              setSelect: [100, 200, 1000, 2000]
          }, function() {
            jcrop = this;
         });
      }, 500);
      $('.label2').click(function() {
          jcrop.destroy();
      });
   });
};



$(document).ready(main);
<!DOCTYPE html> 
<html>
<head>
  <meta charset="UTF-8">
  <script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="animate.js"></script>
  <script src="nham/js/jquery.min.js"></script>
  <script src="nham/js/jquery.Jcrop.min.js"></script>
  <link rel="stylesheet" href="nham/css/jquery.Jcrop.css" type="text/css" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <?php

  $valid_ext = array('jpeg', 'png', 'jpg', 'gif');
  $max_size = 200 * 1024;
  $nw = $nh = 100;

  if ($_SERVER['REQUEST_METHOD'] === 'POST') {
      if (isset($_FILES['img'])) {
          $ext = strtolower(pathinfo($_FILES['img']['name'], PATHINFO_EXTENSION));
          if (in_array($ext, $valid_ext)) {
              $path = 'uploads/'. uniqid() . "." . $ext;
              $data = file_get_contents($_FILES['img']['tmp_name']);
              $vImg = imagecreatefromstring($data);
              $dstImg = imagecreatetruecolor($nw, $nh);
              imagecopyresampled($dstImg, $vImg, 0, 0, $_POST['x'], $_POST['y'], $nw, $nh, $_POST['w'], $_POST['h']);
              imagejpeg($dstImg, $path);
              echo "<img src='path' />";
          } else {
              echo 'unknown problem!';
          }
      } else {
          echo 'file not set';
      }
  } else {
      echo 'bad request!';
  } 

  ?>
    
asked by anonymous 11.09.2016 / 17:10

0 answers