我开发了一个小型 JCrop 文件上传应用程序；这是我的代码：
function createCropImage(event)
{
//alert(event.target.result);
document.getElementById("Imgpreview").src = event.target.result;
var img2 = document.getElementById("Imgpreview1").src = event.target.result;
// Create variables (in this scope) to hold the API and image size
var jcrop_api, boundx, boundy;
$('#Imgpreview1').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;
});
function updatePreview(c)
{
$('#Xcoardinate').val( Math.round(c.x));
$('#Ycoardinate').val( Math.round(c.y));
$('#width').val( Math.round(c.w));
$('#height').val( Math.round(c.h));
if (parseInt(c.w) > 0)
{
var rx = 100 / c.w;
var ry = 100 / c.h;
$('#Imgpreview').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'
});
}
};
}
这Imgpreview是预览图像，Imgpreview1也是源图像。我首先通过浏览按钮选择一个图像：
<input type="file" size="45" id="photoUploadElmt" name="upload" onchange="previewImg()" style="width:430px;"/>
原始图像 (Imgpreview1) 和预览图像 (Imgpreview) 显示正常，但如果我选择另一个图像，预览图像是正确的，但Imgpreview1我看到的是旧图像。
如果我将以下代码放在注释中，则图像会正确显示，但我会丢失 JCrop 实例：
$('#Imgpreview1').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;
});