裁剪图像无法正常工作，裁剪了错误的部分 - Jcrop Cropping images does not work properly, wrong sections are being cropped

Jcrop Cropping images does not work properly, wrong sections are being cropped

我使用jcrop裁剪图像。以下代码包含客户端代码，该代码将图像与坐标一起发送到服务器端进行裁剪。据我了解，jcrop代码看起来很好，但没有返回正确的结果。

为此工作了几个小时，但没有任何成功。搜索谷歌等，但没有成功。任何帮助将不胜感激。

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

我遇到了同样的问题。一个可能的原因是由于客户端的图像大小调整（显式或隐式）而导致坐标更改。选择后，您需要固定比率：

$('#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。此外，还可以优化选择器。

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

<img>

标记。我相信您可能正在为

<img id="img1"/>

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