setSelect unable to change selection / update preview

derokorian commented 12 years ago

Been having trouble with this for a day or two. When I set the relevant options the Jcrop works perfectly, however when I add in the setSelect option the selected area is movable and changeable except that you can't STOP moving or changing. This is happening in FF, Chrome and IE. What happens is when you try to move the selection, the box continues to follow the mouse even after releasing the mouse button and continually even when your mouse goes beyond the image (though the box stays in the image). If you manage to create a new selection area, you cannot stop changing the size. The last corner just continues to follow my mouse around much the same way as just moving the box. The error received by developer tools is that boundx is undefined, however simply removing (or commenting out) the setSelection assignment and it works just fine.

Below is the code I've used to reproduce this in the most minimal way possible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>jCrop + Dialog TEST</title>
    <script type="text/javascript" src="Include/jquery-1.7.2.min.js"></script>
    <link href="Custom/jCropStyles.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="Include/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var jCropOptions =
            {
                onSelect: jCropUpdate,
                onChange: jCropUpdate,
                aspectRatio: ($('#jCrop_hdnTargetWidth').val() / $('#jCrop_hdnTargetHeight').val()),
                boxWidth: 500,
                boxHeight: 500
            }
            if ($('#jCrop_CropX2').val() > 0) 
            {
                jCropOptions.setSelect = 
                [
                    $('#jCrop_CropX').val(), 
                    $('#jCrop_CropY').val(),
                    $('#jCrop_CropX2').val(),
                    $('#jCrop_CropY2').val()
                ];
            }

            $('#jCrop_jCropImage').Jcrop(jCropOptions,
            function () {
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                jcrop_api = this;
            });
            $('#jCropPreviewContainer').css({
                'width': $('#jCrop_hdnTargetWidth').val(),
                'height': $('#jCrop_hdnTargetHeight').val()
            });
        });

        function jCropUpdate(c) {
            storeCoords(c);
            updatePreview(c);
        };

        function storeCoords(c) {
            $('#jCrop_jCropX').val(c.x);
            $('#jCrop_jCropY').val(c.y);
            $('#jCrop_jCropW').val(c.w);
            $('#jCrop_jCropH').val(c.h);
        };

        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = 100 / c.w;
                var ry = 100 / c.h;
                $('#jCrop_jCropPreview').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'
                });
            }
        };
    </script>
</head>
<body> 
    <form method="post" action="Dev-jCrop.aspx" id="form1" enctype="multipart/form-data">
        <input type="hidden" name="jCrop$hdnCropX" id="jCrop_CropX" value="25" />
        <input type="hidden" name="jCrop$hdnCropY" id="jCrop_CropY" value="50" />
        <input type="hidden" name="jCrop$hdnCropX2" id="jCrop_CropX2" value="175" />
        <input type="hidden" name="jCrop$hdnCropY2" id="jCrop_CropY2" value="200" />
        <input type="hidden" name="jCrop$hdnTargetWidth" id="jCrop_hdnTargetWidth" value="100" />
        <input type="hidden" name="jCrop$hdnTargetHeight" id="jCrop_hdnTargetHeight" value="100" />
        <div id="jCrop_pnlCrop" style="width: 650px">
            <div id="modalCrop">
                <div id="jCropImageContainer" style="width:500px; height: 500px; float: left;">
                    <img id="jCrop_jCropImage" src="http://localhost/FileRepository/Default.aspx?FRLID=37&amp;Rand=1144118105" />
                </div>
                <div ID="jCropPreviewContainer" style="height: 100px; width: 100px;overflow:hidden;float: right;">
                    <img id="jCrop_jCropPreview" class="jcrop-preview" src="http://localhost/FileRepository/Default.aspx?FRLID=37&amp;Rand=1144118105" />
                </div>
            </div>
            <input type="hidden" name="jCrop$jCropX" id="jCrop_jCropX" value="426" />
            <input type="hidden" name="jCrop$jCropY" id="jCrop_jCropY" value="156" />
            <input type="hidden" name="jCrop$jCropW" id="jCrop_jCropW" value="346" />
            <input type="hidden" name="jCrop$jCropH" id="jCrop_jCropH" value="346" />
            <input type="hidden" name="jCrop$jCropPath" id="jCrop_jCropPath" />
            <input type="hidden" name="jCrop$jCropFileName" id="jCrop_jCropFileName" />
            <input type="submit" name="jCrop$btnCrop" value="Crop" id="jCrop_btnCrop" class="BaseButton SubmitButton" />
        </div>
    </form>
</body>
</html>

halida commented 11 years ago

Have encounter same kind of problem, have you figured out what happened?

derokorian commented 10 years ago

@halida I have not figured out the solution, we currently are not "preselecting" an area, when trying to edit a previously cropped image.

tapmodo / Jcrop

setSelect unable to change selection / update preview #50