Jump to content
rafael.munareto

Recortar com jcrop no php alterando a foto no banco de dados

Recommended Posts

Pessoal, 

 

    No código abaixo quero recortar a foto e subir o nome do arquivo na variável que busco no banco de dados, consegui fazer o efeito de recortar e de visualizar mas não está aparecendo a imagem recortada e nem salvando o nome do arquivo com a nova dimensão, podem me ajudar:

 


<?php
error_reporting(E_ALL ^ E_NOTICE);
require_once("mostra-alerta.php");
  include("coneta_mysql.php");
/**
 * Jcrop image cropping plugin for jQuery
 * Example cropping script
 * @copyright 2008-2009 Kelly Hallman
 * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
 */

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

  $src = "img/perfil/<?php echo $foto_perfil ; ?>";
  $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;
}
?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>REDE A</title>
    <link rel="icon" href="img/logo_pequeno.png">
    <link href="css/principal.css" rel="stylesheet" />
    <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 href="css/select2.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/principal.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery.Jcrop.js" type="text/javascript"></script>
  <script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
  <link rel="stylesheet" href="css/demos.css" type="text/css" />
</head>

<script type="text/javascript">
      jQuery(function($){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      
      $('#cropbox').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1
        
      },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
      });

      function updatePreview(c)
      {
        if (parseInt(c.w) > 0)
        {
          var rx = 100 / c.w;
          var ry = 100 / c.h;

          $('#preview').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'
          });
        }
      };

        $(function(){

        $('#cropbox').Jcrop({
          aspectRatio: 1,
          onSelect: updateCoords
        });

      });

      function updateCoords(c)
      {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
      };

      function checkCoords()
      {
        if (parseInt($('#w').val())) return true;
        alert('Please select a crop region then press submit.');
        return false;
      };

    });

</script>

  <body>
      <main>
    <?php include("conecta_mysql.php"); 
          require_once("logica-usuario.php");
          include("foto_perfil_php.php");?>    

      <div id="outer">
      <div class="jcExample">
      <div class="article">
          <table>
            <tr>
              <td>
                <img id="cropbox" alt="Flowers" src="img/perfil/<?php echo $foto_perfil ; ?>" style="width: 100%; margin-right: 2rem">
              </td>
              <td>
                  <div style="width:100px;height:100px;overflow:hidden;">
                      <img src="img/perfil/<?php echo $foto_perfil ; ?>" id="preview" alt="Preview" class="jcrop-preview" />
                    </div>
              </td>
            </tr>
          </table>
        <form action="alterar_imagem.php" method="post" onsubmit="return checkCoords();">
          <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" value="Recortar" />
      </form>
          <form method="post" enctype="multipart/form-data" name="cadastro">
              <input class="btn btn-outline-success" id="escolha_foto" type="file" name="foto">
              <button type="file" id="button_perfil" class="btn btn-outline-success" name="upload_foto"> OK </button>
              <button class="btn btn-outline-success" onclick="refresh()">SAIR</button>
          </form>    
      </div>
      </div>
      </div> 
    </main>
 </body>

<?php include('rodape.php') ?>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By mamotinho
      Olá, estou com problemas, minha data está atualizando porém eu clico em um produto ele exibe o tempo sem atualizar . quando eu mudo de produto ele mostra os dois valores exemplo
      Produto 1: tem duraçao de: 1 dia e 13:023 PM
      Produto 2: tem duraçao de: 0 dia e 23:023 PM

      Quando eu clico no produto 1 ele exibe normalmente, porém quando mudo para o produto 2 ele fica atualizando o valor do dia do produto 1 e do produto 2 sempre mudando.
      segue abaixo como está o codigo

      JavaSCRIPT
       
      function anooo(mes,dia,h,m){ var mess = mes; var dias = dia; var hss = h; var mss = m; // Set the date we're counting down to var countDownDate = new Date(""+mess+" "+dias+", 2020 "+hss+":"+mss+":00").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var dayss = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById("days").innerHTML = dayss; document.getElementById("hrs").innerHTML = hours; document.getElementById("minus").innerHTML = minutes; document.getElementById("secs").innerHTML = seconds; this.remove(countDownDate); // If the count down is over, write some text if (distance < 0) { clearInterval(x); } }, 1000); } AQUI É O CHAMADO:
       
      <? if($result->Discount>=1){ $Month = date('M', strtotime($result->DateDiscount)); $Days = date('d', strtotime($result->DateDiscount)); $Hours = date('H', strtotime($result->DateDiscount)); $Minutes = date('i', strtotime($result->DateDiscount)); echo "<script>anooo('".$Month."','".$Days."','".$Hours."','".$Minutes."')</script>"; //echo "<script>alert('".$Month."')</script>"; ?> <ul class="time_sell remain_time"> <li> <dl> <dt class="blind">남은시간</dt> <dd> <span class='n_date day' id='days'></span> <span class='date'>일</span> <span class='n_time hour' id='hrs'></span> <span class='n_time minute' id='minus'></span> <span class='n_time second' id='secs'></span> <div id="countdown"></div> </dd> </dl> </li> </ul> <? } ?> eu já tentei de tudo mais sempre que mudo de produto ele exibe a data dos produtos anteriores em loop. a cada atualização do setInterval
    • By AndersonVSilva
      Bom dia Pessoal,
       
      Efetuei uma busca no forum e não encontrei alguma solução para meu problema.
       
      Tenho este form via HTML:
       
      <td><form id="form1" action="CallProc02.php" method="post"><input type="hidden" name="id" value="1" /></form></td> <td><input form="form1" type="text" name="DDDA" value="Ex: 75" /></td> <td><input form="form1" type="text" name="NumA" value="Ex: 982825441" /></td> <td><input form="form1" type="text" name="DtInit" value="Ex: 2018-01-01" /></td> <td><input form="form1" type="text" name="DtEnd" value="Ex: 2019-01-01" /></td> <td><input form="form1" type="submit" value="Enviar" /></td> E aqui está o código PHP:
      <?php $sDDDA = $_POST['DDDA']; $sNumA = $_POST['NumA']; $sDtInit = $_POST['DtInit']; $sDtEnd = $_POST['DtEnd']; $con = new PDO("mysql:host:IP;dbname=DB", "User", "Pass"); $stmt = $con->prepare("CALL NOC_cobranca_conecta_historico_msisdn(:qDDDA, :qNumA, :qDtInit, :qDtEnd) "); $stmt->bindParam(":qDDDA", $sDDDA, PDO::PARAM_STR, 3); $stmt->bindParam(":qNumA", $sNumA, PDO::PARAM_STR, 10); $stmt->bindParam(":qDtInit", $sDtInit, PDO::PARAM_STR, 12); $stmt->bindParam(":qDtEnd", $sDtEnd, PDO::PARAM_STR, 12); $stmt->execute(); $result = $stmt->fetchAll(PDO::FETCH_ASSOC); if ($result) { echo "OK"; } else { echo "NOK - Report Development Team"; } ?> No Apache ele fica logando o erro ' PHP Notice:  Undefined index: NumA in /var/www/html/Consulta/CallProc02.php' .
       
      Alguém pode me dizer oque estou fazendo errado?
       
      Obrigado desde já pela ajuda.
    • By asacap1000
      Salve Galera!!
      Estou com um problema que acredito que seja muito facil mas não estou conseguindo colocar no código.
       
      Tenho um formulário simples onde temos apenas um campo a ser preenchido, input file.
      estarei utilizando ele no celular para fotos de processos de conferência. O que preciso é que assim que constar dados no campo ele automaticamente executa o form para salvar.
      segue script;
       
      <form name="form" id="form"class="form-horizontal" action="" method="post"> <div class="form-group form-group-lg"> <div class="col-sm-12"> <input id="foto" name="foto" hidden="1" value="<?=$prot_foto?>" type="text" maxlength="200" > <input id="lote" name="lote" hidden="1" value="<?=$lote?>" type="text" maxlength="200" > <label for='selecaoarquivo' ><figure><svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50" height="40" viewBox="0 0 512.000000 392.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,392.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M1970 3073 l-151 -163 681 0 682 0 -19 24 c-10 14 -70 85 -133 160 l-115 134 -397 4 -397 3 -151 -162z m710 17 l0 -60 -190 0 -190 0 0 60 0 60 190 0 190 0 0 -60z"/> <path d="M3370 3005 l0 -95 240 0 240 0 0 95 0 95 -240 0 -240 0 0 -95z"/> <path d="M1154 2955 l-1 -45 224 0 223 0 0 45 0 45 -222 0 -223 0 -1 -45z"/> <path d="M1105 2829 c-114 -19 -200 -64 -266 -137 -85 -94 -116 -191 -126 -384 l-6 -128 713 0 713 0 72 68 c122 117 239 184 386 223 69 19 109 23 224 22 121 0 152 -4 228 -27 48 -14 118 -42 156 -61 78 -39 205 -137 248 -189 l28 -36 433 0 432 0 0 118 c0 123 -20 234 -56 304 -47 94 -138 168 -254 210 l-65 23 -1405 1 c-773 1 -1427 -2 -1455 -7z"/> <path d="M2715 2207 c-212 -23 -436 -233 -475 -446 -14 -78 -12 -196 5 -270 43 -181 197 -344 384 -408 52 -18 89 -23 171 -23 179 0 297 47 415 165 116 115 175 256 175 415 0 232 -158 458 -378 540 -68 26 -200 38 -297 27z"/> <path d="M712 1528 c5 -611 5 -613 63 -728 52 -102 125 -163 251 -207 l79 -28 1420 0 c1350 0 1423 1 1480 18 177 55 271 151 315 321 19 75 20 110 20 633 l0 553 -396 0 c-218 0 -394 -3 -392 -7 2 -5 15 -30 29 -58 54 -102 81 -210 86 -346 11 -261 -69 -472 -249 -651 -309 -311 -799 -341 -1140 -70 -167 133 -273 303 -314 503 -13 64 -15 114 -11 219 6 150 24 224 83 343 l34 67 -681 0 -680 0 3 -562z"/> </g> </svg></figure><h4>TIRAR FOTO</h4></label> <input type="file" id="selecaoarquivo" class="btn btn-danger" name="image[]" accept="image/*" capture="camera"> </div> </div><br> <p><br> <p> <button name="Cadastrar" id="cadastrar" value="Cadastrar" class="btn btn-success " type="Submit" onclick="javascript:document.getElementById('blanket').style.display = 'block';document.getElementById('aguarde').style.display = 'block';"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="25" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><h4>SALVAR FOTO</h4></button> </form> Se puderem me dar uma força nisso agradeço imensamente!!!
       
    • By fjuniorlira
      Pessoal estou construindo essa página: http://webe.cf/teste-cadastro Preciso que que no input "Conta" o dígito fique na mesma linha. Como posso fazer isso?
      SEGUE O CÓDIGO:
       
      <p> <span style="font-family: Arial, Helvetica, sans-serif; color: rgb(51, 51, 51); font-weight: bold;">Conta:</span></big> <span style="color: rgb(255, 0, 0); font-weight: bold;">*</span><br/> <input type="text" required="required" size="35" name="conta" onkeypress="formatar('####-#', this)" pattern="[0-9.-]+$" maxlength="9" style="width: 300px; height: auto; font-family: Arial; font-size: 16px"> </p> <p> <span style="font-family: Arial, Helvetica, sans-serif; color: rgb(51, 51, 51); font-weight: bold;"></span></span> <input type="text" required="required" size="35" name="digito" onkeypress="formatar('####-#', this)" pattern="[0-9.-]+$" maxlength="9" style="width: 39px; height: auto; font-family: Arial; font-size: 16px"> </p>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.