我已经使用了这里提到的教程，使用 html 5 和 jquery 裁剪和上传图像。我已经实现了它，如果我在同一页面上使用 image_div，它工作正常。如果我在对话框中打开图像，则裁剪功能不起作用。图像出现在对话框中，但无法裁剪。这是我的代码。
脚本.js
//Make global variables for selected image for further usage
var selectImgWidth,selectImgHeight,jcrop_api, boundx, boundy,isError=false;
$(document).ready(function(){
$("#image_file").change(function(){
var previewId = document.getElementById('load_img');
var thumbId = document.getElementById('thumb');
previewId.src = '';
$('#image_div').hide();
var flag = 0;
// Get selected file parameters
var selectedImg = $('#image_file')[0].files[0];
//Check the select file is JPG,PNG or GIF image
var regex = /^(image\/jpeg|image\/png)$/i;
if (! regex.test(selectedImg.type)) {
$('.error').html('Please select a valid image file (jpg and png are allowed)').fadeIn(500);
flag++;
isError = true;
}
// Check the size of selected image if it is greater than 250 kb or not
// else if (selectedImg.size > 250 * 1024) {
// $('.error').html('The file you selected is too big. Max file size limit is 250 KB').fadeIn(500);
// flag++;
// isError = true;
// }
if(flag===0){
isError=false;
$('.error').hide(); //if file is correct then hide the error message
// Preview the selected image with object of HTML5 FileReader class
// Make the HTML5 FileReader Object
var oReader = new FileReader();
oReader.onload = function(e) {
// e.target.result is the DataURL (temporary source of the image)
thumbId.src = previewId.src=e.target.result;
// FileReader onload event handler
previewId.onload = function () {
$( "#dialog" ).dialog( "open" ); //--> this is where dialog box is opened
// display the image with fading effect
$('#image_div').fadeIn(500);
selectImgWidth = previewId.naturalWidth; //set the global image width
selectImgHeight = previewId.naturalHeight;//set the global image height
// Create variables (in this scope) to hold the Jcrop API and image size
// destroy Jcrop if it is already existed
if (typeof jcrop_api !== 'undefined')
jcrop_api.destroy();
// initialize Jcrop Plugin on the selected image
$('#load_img').Jcrop({
minSize: [32, 32], // min crop size
// aspectRatio : 1, // keep aspect ratio 1:1
bgFade: true, // use fade effect
bgOpacity: .3, // fade opacity
onChange: showThumbnail,
onSelect: showThumbnail
}, function(){
// use the Jcrop API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the Jcrop API in the jcrop_api variable
jcrop_api = this;
});
};
};
// read selected file as DataURL
oReader.readAsDataURL(selectedImg);
}
});
});
function showThumbnail(e)
{
var rx = 155 / e.w; //155 is the width of outer div of your profile pic
var ry = 190 / e.h; //190 is the height of outer div of your profile pic
$('#w').val(e.w);
$('#h').val(e.h);
$('#w1').val(e.w);
$('#h1').val(e.h);
$('#x1').val(e.x);
$('#y1').val(e.y);
$('#x2').val(e.x2);
$('#y2').val(e.y2);
$('#thumb').css({
width: Math.round(rx * selectImgWidth) + 'px',
height: Math.round(ry * selectImgHeight) + 'px',
marginLeft: '-' + Math.round(rx * e.x) + 'px',
marginTop: '-' + Math.round(ry * e.y) + 'px'
});
}
function validateForm(){
if ($('#image_file').val()==='') {
$('.error').html('Please select an image').fadeIn(500);
return false;
}else if(isError){
return false;
}else {
return true;
}
}
html内容
<div id="dialog" title="Uploaded Image">
<img src="" id="load_img" style="float: left;width :400px;height:400px"/>
<img src="images/pro.jpg" id="thumb" style="float:left;width: 200px;height: 200px"/>
</div>
上传图片的代码：
<input type="file" id="image_file" name="picture1"/>
对话代码：
$(function(){
$("#dialog").dialog({
dialogClass: 'DynamicDialogStyle',
autoOpen: false,
modal:true,
width:600,
height:600,
position:'center',
buttons:{
"Uploads": function(){
$(this).dialog("close");
},
"Cancel" : function(){
$(this).dialog("close");
}
}
});
});
我还希望为我上传的每张图片显示对话框，但它只出现在我尝试上传的 4 张图片中的第一张图片中。请帮我。