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 bypikeno
      Bom tarde!
      Eu peguei um link no console do Google tradutor, e queria por em um form para criar o link, o link abre, só que não "carrega", se eu atualizar a página do mesmo, o link funciona.
      o link é este aqui: https://translate.google.com/translate_tts?ie=UTF-8&amp;client=tw-ob&amp;q=TEXT_HERE&amp;tl=en 
       
      o form que estou usando é este :
       
      <form method="get" action="https://translate.google.com/translate_tts" enctype="application/x-www-form-urlencoded">
      <input type="hidden" name="ie" value="UTF-8">
      <input type="hidden" name="client" value="tw-ob">
      <input type="text" name="q" value="Texto_Here">
      <input type="hidden" name="tl" value="en">
      <input type="submit" value="Criar">
      </form>
       
      O link funciona como eu quero, mas quando eu clico em enviar, abre com erro 404, mas se eu atualizar o link funciona, eu gostaria de trazer o mesmo link num iframe pra dar play e ouvir o texto gerado. Obrigado desde já.  
    • By Raphael Beghelli Ribeiro
      Prezados,

      Tenho um formulário de busca, onde um INPUT recebe informações de um Banco de Dados.
      No Android, esta tudo funcionando 100%. Porém, no IoS, ele só marca o primeiro item da lista de busca.
      <div id="local"> <font>QUAL BAIRRO, CIDADE OU CÓDIGO?</font> <input name="psqm" id="psqm" type="text" placeholder="DIGITE O BAIRRO, A CIDADE OU O CÓDIGO" autocomplete="off" /> </div> Após preencher todos os campos anteriores, tento digitar por exemplo: Jardim

      na listagem, aparece:
      Jardim América;
      Jardim Santa Lucia;
      Jardim Santos;
      Outros...
       
      Independente de onde clicar, apenas o primeiro item ("Jardim América") é selecionado.

      Alguma dica? Lembrando que este erro é apenas no iPhone.
    • By digonaweb
      Bom dia!
       
      Alguém pode me ajudar com esse script abaixo?
       
      Preciso fazer com que o link abra em uma nova janela, pois fica abrindo em um quadrado onde está fisicamente o relógio no site.
       
      <!-- clock widget start -->
       
      <script type="text/javascript">
           var css_file=document.createElement("link");
           css_file.setAttribute("rel","stylesheet");
           css_file.setAttribute("type","text/css");
           css_file.setAttribute("href","//s.bookcdn.com//css/cl/bw-cl-150x70.css");
           document.getElementsByTagName("head")[0].appendChild(css_file);
      </script>
       
      <div id="tw_1_737904741"><div style="width:150px; height:70px; margin: 0 auto;">
      <a href="https://booked.net/time/rio-de-janeiro-18486">Rio de Janeiro</a>
      <br/></div></div>
       
      <script type="text/javascript"> function setWidgetData_737904741(data){ if(typeof(data) != 'undefined' && data.results.length > 0) { for(var i = 0; i < data.results.length; ++i) { var objMainBlock = ''; var params = data.results; objMainBlock = document.getElementById('tw_'+params.widget_type+'_'+params.widget_id); if(objMainBlock !== null) objMainBlock.innerHTML = params.html_code; } } } var clock_timer_737904741 = -1; </script> <script type="text/javascript" charset="UTF-8" src="https://widgets.booked.net/time/info?ver=2&domid=209&type=1&id=737904741&scode=124&city_id=18486&wlangid=1&mode=1&details=0&background=ece0bf&color=4c4d57&add_background=ffffff&add_color=2071c9&head_color=ffffff&border=1&transparent=1"></script>
       
      <!-- clock widget end -->
       
       

       
       

    • By bfigueiredoc
      Olá!! Estou precisando de ajuda
       
      tenho um site onde o script está totalmente em inglês (páginas e tal) e gostaria de poder colocar opções de outras linguagens (portugues e espanhol) existe algum jeito?
       
      um exemplo: https://www.neteller.com/pt o site da neteller, tem um icone no canto direito superior que pode escolher o idioma
    • By oomaikoo
      Boa noite pessoal, estou tentando fazer um código, para mostrar um banner em meu site, quando o usuário entrar, baseado na localização dele. É basicamente o seguinte: a API de geolocalização retorna o nome da cidade, e, se for a cidade, então mostre o banner. Se não for, mostre outro. O código JavaScript que estou usando é esse:
      <script type="application/javascript"> function geoip(json){ var city = document.getElementById("user_city"); city.textContent = json.city; } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script> A cidade é: <span id="user_city"></span>

      Esse código retorna o nome da cidade no <span id>.

      Porém eu preciso fazer um IF, ELSE no próprio JavaScript, para mostrar o banner ou não. Seria basicamente assim:
      <script type="application/javascript"> function geoip(json){ var city = document.getElementById("user_city"); city.textContent = json.city; } if (city == "nomedacidade") { document.write ("<img src='banner1.jpg'></img>"); } else { document.write ("<img src='banner2.jpg'></img>"); } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script>

      O problema é que a variável city não fica setada dentro do if, não retorna o nome da cidade, eu só queria comparar no if o nome da cidade com o que a API retorna.
      Alguém tem alguma ideia?
×

Important Information

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