Chrome shows image in full size when using jcrop
I am using Jcrop jQuery API to crop the image. So, for it first user clicks on a link "Change Picture" and it will open "File browser". After user selects an image, a lightbox will open having 2 boxes, 1 showing original image and other showing preview of image after the crop. But, in Chrome the original image opens in full size, even though it has fixed max-width and max-height set in CSS. And, when i open the lightbox again without refreshing the window, it will show the image according to max-width and max-height. I couldn't figure out what is the problem. It works fine in Firefox. I have attached the screenshots, too.
Here is the code :
This is the form containing the values for cropped image. The file selector upload-profile-pic will be when user clicks on Change Picture link (not shown in the code). And, after user selects the image, it will be set in img tag with id 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;" />
The code for setting src attribute of 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;
}
}
After value of the src attribute is set, it will open the lightbox (the lightbox opens on the click event of link with id crop-profile-pic ). In lightbox, it will show the page crop-profile-pic.jsp .
The main code of the jsp page :
Javascript code :
<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>
HTML Code for original-image div (image id target ) and preview div :
<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 for target :
#target {
max-height:280px;
max-width:280px;
height: auto!important;
width: auto!important;
}
Screenshot when image selected first time : 
Screenshot when image selected again without refreshing the page : 
I would recommend you setting the width and height of the box in the jcrop settings, not with css. I think this would do the trick for you.
It should look like that
$('#cropbox').Jcrop({
boxWidth: 280, //Maximum width you want for your bigger images
boxHeight: 280, //Maximum Height for your bigger images
...
});
上一篇: 更改图像文件的宽度javascript