使用jcrop时，Chrome会以完整尺寸显示图片

Question

我正在使用Jcrop jQuery API裁剪图像。 因此，首先用户点击“更改图片”链接，它将打开“文件浏览器”。用户选择图像后，灯箱将打开，有2个框，1个显示original image，其他显示preview of image后裁剪。但是，在Chrome中，original image以全尺寸打开，即使它在CSS中设置了固定的最大宽度和最大高度。并且，当我再次打开灯箱而不刷新窗口时，它将根据最大宽度和最大高度显示图像。我无法弄清楚问题是什么。它在Firefox中运行良好。我也附上了截图。

以下是代码：

这是包含裁剪图像值的表单。文件选择器upload-profile-pic将在用户点击Change Picture链接时显示（代码中未显示）。并且，在用户选择图片后，它将设置在img标记中，标识为uploaded-image。

<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;" />

设置src的{​​{1}}属性的代码：

uploaded-image

设置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的链接的点击事件上打开）。在灯箱中，它会显示页面crop-profile-pic。

jsp页面的主要代码：

Javascript代码：

crop-profile-pic.jsp

<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> div的HTML代码（图片ID original-image）和target div：

preview

<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

第一次选择图像时的屏幕截图：

再次选择图像而不刷新页面时的屏幕截图：

Answer 1

我建议您在jcrop设置中设置框的宽度和高度，而不是css。我认为这对你来说很有用。

看起来应该是那样

if(is_array($criteria)) {
    $query.=" WHERE `".$where." IN (" . join(",", $criteria) . ")";
}
else {
    $query.=" WHERE `".$where." = '{$criteria}'";
}