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

时间:2013-11-26 13:35:17

标签: jquery jcrop

我正在使用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

第一次选择图像时的屏幕截图: Screenshot of first time

再次选择图像而不刷新页面时的屏幕截图: Screenshot of second time

1 个答案:

答案 0 :(得分:0)

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

看起来应该是那样

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