Chrome在使用jcrop时以全尺寸显示图像

Question

我正在使用Jcrop jQuery API来裁剪图像。因此，对于它，首先用户点击链接“更改图片”，它将打开“文件浏览器”。用户选择图像后，一个灯箱将打开2个框，1个显示original image，另一个显示裁剪后的preview of image。但是，在Chrome中，original image以全尺寸打开，即使它在CSS中设置了固定的最大宽度和最大高度。并且，当我在没有刷新窗口的情况下再次打开灯箱时，它将根据最大宽度和最大高度显示图像。我不知道问题出在哪里。它在Firefox中运行得很好。我也附上了截图。

代码如下：

这是包含裁剪图像的值的表单。当用户单击Change Picture链接(代码中未显示)时，将显示文件选择器upload-profile-pic。在用户选择图像后，它将被设置在id为uploaded-image的img标签中。

<form id="crop-image" name="cropImageForm" action="/user/UploadProfilePicture.action" method="POST" enctype="multipart/form-data">
                <input id="imgX" name="imgX" type="hidden" />
                <input id="imgY" name="imgY" type="hidden" />
                <input id="imgW" name="imgW" type="hidden" />
                <input id="imgH" name="imgH" type="hidden" />
                <input id="upload-profile-pic" name="uploadedImage" type="file" style="display: none;" accept="image/*" onchange="checkUploadedFile();" />
            </form>
            <a href="/lightbox-pages/crop-profile-pic.jsp?lightbox[width]=800&lightbox[height]=600" style="display: none;" id="crop-profile-pic">Crop Profile Picture</a>
            <img id="uploaded-image" style="display: none;" />

uploaded-image的src属性设置代码：

var uploadedImage;
var lightBoxNotOpened=true;//to prevent image from opening twice in lightbox

function checkUploadedFile() {
    var fileElement = document.getElementById("upload-profile-pic");
    var fileExtension = "";
    if (fileElement.value.lastIndexOf(".") > 0) {
    fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
    }
    if (fileExtension == "jpg" || fileExtension == "JPG" || fileExtension == "jpeg") {

        var imageReader = new FileReader();
        imageReader.onload = function(e) {

            $("#uploaded-image").attr("src", e.target.result);
            $("#crop-profile-pic")[0].click();

        };
        imageReader.readAsDataURL(fileElement.files[0]);

        return false;
    }
    else {
        return false;
    }
}

在设置了src属性的值之后，它将打开lightbox (在id为crop-profile-pic的链接的单击事件上打开lightbox )。在lightbox中，它将显示页面crop-profile-pic.jsp。

jsp页面的主要代码：

Javascript代码：

<script type="text/javascript">

    $(document).ready(function() {

        if (!lightBoxNotOpened) {
            jQuery(".jcrop-holder").remove();
            jQuery("#target").attr("src", jQuery("#uploaded-image").attr("src"));//setting target image source
            jQuery("#preview-pane .preview-container img").attr("src", jQuery("#uploaded-image").attr("src"));//setting target image source
            // Create variables (in this scope) to hold the API and image size
            var jcrop_api,
                    boundx,
                    boundy,

            // Grab some information about the preview pane
                    $preview = $('#preview-pane'),
                    $pcnt = $('#preview-pane .preview-container'),
                    $pimg = $('#preview-pane .preview-container img'),

                    xsize = 165,
                    ysize = 165;

            //console.log('init', [xsize, ysize]);
            $('#target').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;

                // Move the preview into the jcrop container for css positioning
                //$preview.appendTo(jcrop_api.ui.holder);
            });
        }
        else {
            lightBoxNotOpened = false;
        }

        function updatePreview(c)
        {
            $('#imgX').val(c.x);
            $('#imgY').val(c.y);
            $('#imgW').val(Math.floor(c.w)-1);
            $('#imgH').val(Math.floor(c.h)-1);
            if (parseInt(c.w) > 0)
            {
                var rx = xsize / c.w;
                var ry = ysize / c.h;

                $pimg.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 submitCropImageForm() {
        document.cropImageForm.submit();
    }

</script>

original-image目录(图像id为target)和preview目录的HTML代码：

    <div style="width:280px;height:280px;margin-left:5px;line-height:280px;border:1px solid black;text-align: center;">
                <img src="/images/no-profile-pic.png" id="target" alt="Uploaded Image" />
            </div>

            <div id="preview-pane">
                <div class="preview-container">
                    <img src="/images/no-profile-pic.png" id="preview-image" class="jcrop-preview" alt="Preview Thumbnail" />
                </div>
            </div>

用于target的CSS：

#target {
        max-height:280px;
        max-width:280px;
        height: auto!important;
        width: auto!important;
    }

第一次选择图片时的截图：

​

在不刷新页面的情况下再次选择图像时的屏幕截图：

​

Answer 1

我建议您在jcrop设置中设置框的宽度和高度，而不是使用css。我想这对你会有用的。

它应该看起来像这样

$('#cropbox').Jcrop({
        boxWidth: 280,   //Maximum width you want for your bigger images
        boxHeight: 280,  //Maximum Height for your bigger images
...
});