Question

我使用jcrop裁剪图像。下面的代码包含客户端代码，它将图像和坐标一起发送到服务器端进行裁剪。据我所知，jcrop代码看起来很好，但没有返回正确的结果。< / p>

在此工作数小时但没有任何成功。搜索谷歌等但没有成功。任何帮助都将深表感谢。

<html>
<form id="frm1" action="jcropServer.php" method="post" enctype="multipart/form-data" >
    <img id="img1"/>
    <label> <input type="text" size="4" id="x" name="x" /></label>
    <label><input type="text" size="4" id="y" name="y" /></label>
    <label> <input type="text" size="4" id="x2" name="x2" /></label>
    <label> <input type="text" size="4" id="y2" name="y2" /></label>
    <label> <input type="text" size="4" id="w" name="w" /></label>
    <label> <input type="text" size="4" id="h" name="h" /></label>
    <input type="file" name="fileToUpload" id="fileToUpload" onchange="readURL(this)">
    <input type="submit" value="Upload Image" name="submit">
</form>


<script>
function readURL(input) {
    if(document.getElementById("fileToUpload").value != "") {
        if ($('#img1').data('Jcrop')) {
            $('#img1').data('Jcrop').destroy();
        }
    }
    if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#img1').attr('src',e.target.result);
                $('#img1').Jcrop({
                    aspectRatio: 1,
                    onChange: showCoords,
                    onSelect: showCoords,

                });
   }

            reader.readAsDataURL(input.files[0]);
    }
}
function showCoords(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    $('#w').val(c.w);
    $('#h').val(c.h);
};
</script>
</html>

<?php

    if(isset($_FILES['fileToUpload'])){
            $namecv=$_FILES['fileToUpload']['name'];
            move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"shared/cv/".$namecv);
        }


        $targ_w = $targ_h = 150;
        $jpeg_quality = 90;


        $src='shared/cv/'.$_FILES['fileToUpload']['name'];




        $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);

    ?>

Answer 1

我有同样的问题。一个可能的原因是由于客户端的图像大小调整（显式或隐式），坐标会发生变化。选择后，您需要确定比率：

$('#img1').Jcrop({
    onSelect: function (coords) {
        // fix crop size: find ratio dividing current per real size
        var ratioW = $('#img1')[0].naturalWidth / $('#img1').width();
        var ratioH = $('#img1')[0].naturalHeight / $('#img1').height();
        var currentRatio = Math.min(ratioW, ratioH);
        $('#x').val(Math.round(coords.x * currentRatio));
        $('#y').val(Math.round(coords.y * currentRatio));
        $('#w').val(Math.round(coords.w * currentRatio));
        $('#h').val(Math.round(coords.h * currentRatio));
    }
});

如果你需要它们（似乎不是这样），不要忘记修复x2和y2。此外，可以优化选择器。

Answer 2

我遇到了同样的问题，浪费了我很多时间。我正在设置我的

的高度和宽度

<img>

标签。我相信你可能会为

设置手动高度和宽度

<img id="img1"/>

img标签的手动大小设置会导致jcrop相对于0,0得到错误的坐标。希望它有所帮助。

Jcrop裁剪图像无法正常工作，裁剪错误的部分

2 个答案: