Save cropped image with JCROP pro Bank

Asked

Viewed 390 times

4

Hello! I am creating a user profile and to crop the image I am using JCROP. He cuts normally for me, but wanted to know how I do to save this result in the image and the bank accept this cut that was made.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Arquivo</title>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/js/jquery.Jcrop.min.js"></script>
<script language="Javascript">
    $(function(){
        $('#ImagemCrop').Jcrop({
            aspectRatio: 1,
            onSelect: UpdateCrop,
            setSelect: [0, 0, 200, 200],
        });

    });
    function UpdateCrop(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
        $("#altura").html("Altura:" + c.h);
        $("#largura").html("Largura:" + c.w);
    };
</script>
</head>
<body>
    <div id="altura">Altura:</div>
    <div id="largura">Largura:</div>
    <form action="recorte.php" method="post">
        <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="hidden" id="imagem" name="imagem" value="img/1.jpg" />
        <input type="submit" value="Recortar Imagem" />
    </form>
    <img src="img/1.jpg" id="ImagemCrop" />
</body>
</html>

<?php
    if (isset($_POST['imagem']) &&
        isset($_POST['x']) &&
        isset($_POST['y']) &&
        isset($_POST['w']) &&
        isset($_POST['h']))
    {
        $targ_w = $_POST['w'];
        $targ_h = $_POST['h'];
        $jpeg_quality = 90;

        $src = $_POST['imagem'];
        $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);
    } else {
        echo 'error';
    }

php javascript html css

  • See this article from Code line about jCrop explaining the PHP code to save the image in the database.

1 answer

0

I don’t know if I got it right, but I believe the best thing to do is to save the images inside a folder through php using the function move_uploaded_file and in your database only the file name.

Example:

$destino = "/images/recortes/";
$imagem = "novafoto01.jpg";

move_uploaded_file($imagem, $destino);

In the database would be with the information: "novafoto01.jpg"

When calling the image you use the default destination of the cropped images, in case $destino, and the image name in the database.

Would something like this:

<?php
    $sql = mysqli_query("SELECT 'imagem_recortada' FROM $tabela WHERE id = '$id'");
    $dado = mysqli_fetch_assoc($sql);
?>

<img src="<?php echo $destino.$dado['imagem_recortada']; ?>" />

Browser other questions tagged php javascript html css

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