我正在使用来自here的fengyuanchen jquery cropper。我有一个单一的图像工作得很好。现在我想添加第二个图像。因此，当用户上传图像时，它会将相同的图像加载到2个不同尺寸的不同裁剪框中。它正在这样做，但第二次预览没有显示。预览图像代码部分中的部分注释说：＆＃34; //加载完成时撤消＆＃34;所以我想知道这是否是它没有显示的部分原因。 这是我的HTML：
<div class="row">
<div class="col-md-3">
<input id="inputImage" name="inputImage" type="file" accept="image/*"><div class="message"> </div>
</div>
<label class="col-md-1">Item #:</label>
<div class="col-md-1"><input type="text" id="itemNum" name="itemNum" /></div>
<div class="col-md-7" id="itemName"></div>
</div>
<div class="large-product-image">
<h2>Large Product Image (400x500)</h2>
<div class="row">
<div class="col-md-12">
<div class="img-container col-md-6" style=" display: block;width: 450px; height: 550px; left: 0 !important; top: 0 !important;">
<img alt="mainImage" id="mainImageL" src="@Url.Content("~/Content/img/400x500-template.png")" style="width: 450px; height: 550px; left: 0 !important; top: 0 !important;">
</div>
<div class="col-md-5 col-md-offset-1">
Cropped Large Image<br />
<div id="croppedLarge"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" id="resetLargeImage">Reset Image</button> <button class="btn btn-primary" id="saveLargeImage">Save Image</button>
</div>
</div>
</div>
<div class="small-product-image">
<h2>Small Product Image (300x174)</h2>
<div class="row">
<div class="col-md-12">
<div class="img-container col-md-6" style=" display: block;width: 350px; height: 224px; left: 0 !important; top: 0 !important;">
<img alt="mainImage" id="mainImageS" src="@Url.Content("~/Content/img/300X174-template.png")" style="width: 350px; height: 220px; left: 0 !important; top: 0 !important;">
</div>
<div class="col-md-5 col-md-offset-1">
Cropped Small Image<br />
<div id="croppedSmall"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" id="resetImage">Reset Image</button> <button class="btn btn-primary" id="saveImage">Save Image</button>
</div>
</div>
这是我的javascript：
<script type="text/javascript">
$(document).ready(function () {
$("#itemNum").blur(function () {
var itemNum = $(this).val().trim();
if (itemNum.length > 0) {
$("#itemName").html("looking up item number...");
$.ajax({
url: '@Url.Action("getItemName", "Home")',
data: {
itemNum: itemNum
},
success: function (name) {
$("#itemName").html(name);
}
});
}
});
(function () {
var canvas = 0;
var $largeImage = $('#mainImageL'),
$smallImage = $('#mainImageS'),
$dataRotate = $('#dataRotate'),
options = {
modal: true,
guides: true,
autoCrop: true,
autoCropArea: 1, // Center 60%
dragCrop: false,
movable: true,
resizable: true,
zoomable: true,
touchDragZoom: false,
mouseWheelZoom: true,
preview: '#croppedLarge',
cropBoxResizable: false,
cropBoxMovable: false,
doubleClickToggle: false,
aspectRatio: 400 / 500,
crop: function (data) {
$dataRotate.val(Math.round(data.rotate));
}
},
optionsSmall = {
modal: true,
guides: true,
autoCrop: true,
autoCropArea: 1, // Center 60%
dragCrop: false,
movable: true,
resizable: true,
zoomable: true,
touchDragZoom: false,
mouseWheelZoom: true,
preview: '#croppedSmall',
cropBoxResizable: false,
cropBoxMovable: false,
doubleClickToggle: false,
aspectRatio: 300 / 174,
crop: function (data) {
$dataRotate.val(Math.round(data.rotate));
}
};
$("#saveLargeImage").click(function () {
var itemNum = $(this).val().trim();
if (itemNum.length > 0) {
$largeImage.cropper('getCroppedCanvas', {
width: 400,
height: 500
}).toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob, $("#inputImage").val());
$.ajax({
url: '@Url.Action("uploadImage", "Home")',
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log('Upload success');
},
error: function (jqXHR, textStatus, errorMessage) {
console.log(errorMessage); // Optional
}
});
}, "image/jpeg");
}
else {
$("#itemName").html("<span class='warn'>Please enter an item number!</span>");
}
});
var $previewL = $("#croppedLarge"),
widthL = $previewL.width();
var $previewS = $("#croppedSmall"),
widthS = $previewS.width();
var $largeInputImage = $('#inputImage'),
URL = window.URL || window.webkitURL,
blobURL;
$("#resetLargeImage").click(function () {
$largeImage.cropper('reset');
});
if (URL) {
$largeInputImage.change(function () {
var files = this.files,
file;
this.width = 0;
this.height = 0;
if (files && files.length) {
file = files[0];
img = new Image();
img.onload = function () {
imageLoaded(this.width, this.height, file)
};
img.onerror = function () {
alert("not a valid file: " + file.type);
};
img.src = URL.createObjectURL(file);
}
});
} else {
$largeImage.parent().remove();
$smallImage.parent().remove();
}
function imageLoaded(width, height, file) {
if (/^image\/\w+$/.test(file.type) && width >= 400 && height >= 500) {
blobURL = URL.createObjectURL(file);
$largeImage.on().cropper(options);
$largeImage.one('built.cropper', function () {
URL.revokeObjectURL(blobURL); // Revoke when load complete
}).cropper('reset', true).cropper('replace', blobURL);
//$imageLarge.on().cropper(options);
var $previewL = $("#croppedLarge"),
widthL = $previewL.width();
$smallImage.on().cropper(optionsSmall);
$smallImage.one('built.cropper', function () {
URL.revokeObjectURL(blobURL); // Revoke when load complete
}).cropper('reset', true).cropper('replace', blobURL);
var $previewS = $("#croppedSmall"),
widthS = $previewS.width();
$(".message").html(' ');
} else {
$(".message").html('Please choose an image file with a width at least 400px and height at least 500px. ' + width + ' - ' + height);
$largeImage.cropper("destroy");
$largeInputImage.val('');
}
}
function resetImage($image) {
}
}());
});
</script>