How to assign the value to input file before saving? When I save the cropped image gets original size

Asked

Viewed 22 times

2

<?php 

if(isset($_FILES['item_foto'])){
  
  $formatoPermitido = array("png", "jpeg", "jpg", "gif");
  $ext = pathinfo($_FILES['item_foto']['name'], PATHINFO_EXTENSION);

  if (in_array($ext, $formatoPermitido)){
      $diretorio = 'img/';
      
      $temporario = $_FILES['item_foto']['tmp_name'];
      $novoNome = uniqid().".$ext";
      //echo ($novoNome);
      move_uploaded_file($temporario, $diretorio.$novoNome);
  }
}

?>
<html>

<head>
  <title>Recortando imagem</title>

  <script src="jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="croppie.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="croppie.css" />

</head>

<body>
  <div class="container">
    <br />
    <h3 align="center">Preparando a foto!</h3>
    <br />
    <br />
    
    <div class="panel panel-default">
      <div class="panel-heading"></div>
      <div class="panel-body" align="center">
      <form action="" method="post" enctype="multipart/form-data">

      <img type="image" name="deusllene_2" style="width: 50px">
      
        <input type="file" name="item_foto" id="item_foto" accept="image/*" />
        <div class="col-md-4" id="carvalho" style="width:350px; margin-top:30px"></div>
        <button type="submit" name="up">envair</button>

      </form>
        <br />
        <div id="store_image"></div>
      </div>
    </div>
  </div>
  
</body>

</html>

<div id="insertimageModal" class="modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Posicione sua imagem</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-8 text-center">
            <div id="image_demo" style="width:350px; margin-top:30px"></div>
            <!--<input type="file" name="insert_image" id="gmc" accept="image/*" />-->
          </div>
          <div class="col-md-4" style="padding-top:30px;">
            <br />
            <br />
            <br />
            <button class="btn btn-success crop_image">Recortar a imagem</button>
          </div>
        </div>
      </div>
  </div>
</div>

<script>
  $(document).ready(function() {

    $image_crop = $('#image_demo').croppie({
      enableExif: true,
      viewport: {
        width: 183,
        height: 230,
        type: 'square' //
      },
      boundary: {
        width: 300,
        height: 300
      }
    });

    $('#item_foto').on('change', function() {
      var reader = new FileReader();
      reader.onload = function(event) {
        $image_crop.croppie('bind', {
          url: event.target.result
        }).then(function() {
          console.log('jQuery bind complete');
        });
      }
      reader.readAsDataURL(this.files[0]);
      $('#insertimageModal').modal('show');
    });

    $('.crop_image').click(function(event) {
      
        $( '#deusllene' ).remove();
      
      $image_crop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
      }).then(function(response) {

        var formData = response;
        
            $('#insertimageModal').modal('hide');

            $( "#carvalho" ).append('<img type="image" name="deusllene" src='+response+' alt="Girl in a jacket">')

            formData.readAsDataURL(this.files[0]);

      });
    });

  });
</script>

<script>
php javascript jquery
No answers

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.