jquery - Chrome 使用 jcrop 时显示全尺寸图像

Question

我正在使用 Jcrop jQuery API 来裁剪图像。因此，首先用户单击链接“更改图片”，它将打开“文件浏览器”。用户选择图像后，将打开一个灯箱，其中有 2 个框，其中 1 个显示原始图像，另一个显示裁剪后的图像预览。但是，在 Chrome 中，原始图像 会以全尺寸打开，即使它在 CSS 中设置了固定的最大宽度和最大高度。而且，当我再次打开灯箱而不刷新窗口时，它将根据最大宽度和最大高度显示图像。我不知道出了什么问题。它在 Firefox 中运行良好。我也附上了屏幕截图。

这是代码:

这是包含裁剪图像值的表单。当用户单击更改图片链接(代码中未显示)时，文件选择器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属性的值后，它将打开灯箱(灯箱在id为crop-profile-pic的链接的点击事件上打开)。在 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 div(图像 ID target)和 preview div 的 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>

目标的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
...
});