Javascript 具有多个图像的fengyuanchen jquery cropper插件
我正在使用来自的fengyuanchen jquery裁剪器。我有一个伟大的工作与单一的形象。现在我想在中添加第二个图像。因此，当用户上传图像时，它会将同一图像加载到两个不同尺寸的裁剪框中。它正在这样做，但是第二次预览没有显示出来。预览图像代码部分的部分注释是：“//加载完成时撤销”，所以我想知道这是否是它没有显示的部分原因。 这是我的HTML：Javascript 具有多个图像的fengyuanchen jquery cropper插件,javascript,jquery,html,Javascript,Jquery,Html,我正在使用来自的fengyuanchen jquery裁剪器。我有一个伟大的工作与单一的形象。现在我想在中添加第二个图像。因此，当用户上传图像时，它会将同一图像加载到两个不同尺寸的裁剪框中。它正在这样做，但是第二次预览没有显示出来。预览图像代码部分的部分注释是：“//加载完成时撤销”，所以我想知道这是否是它没有显示的部分原因。 这是我的HTML： <div class="row"> <div class="col-md-3"> <input id="inpu
<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>
项目#：
大型产品图片（400x500）
裁剪的大图像
重置图像保存图像
小型产品图片（300x174）
裁剪的小图像
重置图像保存图像
<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>
$（文档）.ready（函数（）{
$（“#itemNum”）.blur（函数（）{
var itemNum=$（this.val（）.trim（）；
如果（itemNum.length>0）{
$（“#itemName”）.html（“查找项目编号…”）；
$.ajax({
url:'@url.Action（“getItemName”，“Home”），
数据：{
itemNum:itemNum
},
成功：功能（名称）{
$（“#项目名称”）.html（名称）；
}
});
}
});
（功能（）{
var=0；
变量$largeImage=$（“#mainImageL”），
$smallImage=$（“#主图像”），
$dataRotate=$（“#dataRotate”），
选项={
莫代尔：是的，
导游：没错，
autoCrop：是的，
自动旋转区域：1，//中心60%
dragCrop:错误，
是的，
可调整大小：正确，
可缩放：是的，
touchDragZoom:false，
MouseweelZoom：没错，
预览：“#裁剪大”，
CropBoxResizeable:错误，
cropBoxMovable:错误，
双击切换：false，
方面：400/500，
裁剪：功能（数据）{
$dataRotate.val（Math.round（data.rotate））；
}
},
选项小={
莫代尔：是的，
导游：没错，
autoCrop：是的，
自动旋转区域：1，//中心60%
dragCrop:错误，
是的，
可调整大小：正确，
可缩放：是的，
touchDragZoom:false，
MouseweelZoom：没错，
预览：“#裁剪小”，
CropBoxResizeable:错误，
cropBoxMovable:错误，
双击切换：false，
方面：300/174，
裁剪：功能（数据）{
$dataRotate.val（Math.round（data.rotate））；
}
};
$（“#savelageImage”）。单击（函数（）{
var itemNum=$（this.val（）.trim（）；
如果（itemNum.length>0）{
$largeImage.cropper（'getCroppedCanvas'{
宽度：400，
身高：500
}).toBlob（函数（blob）{
var formData=new formData（）；
append（'crappedimage'，blob，$（“#inputImage”）.val（）；
$.ajax({
url:'@url.Action（“上传图像”，“主页”），
方法：“张贴”，
数据：formData，
processData:false，
contentType:false，
成功：函数（）{
console.log（“上传成功”）；
},
错误：函数（jqXHR、textStatus、errorMessage）{
console.log（errorMessage）；//可选
}
});
}，“图像/jpeg”）；
}
否则{
$（“#itemName”）.html（“请输入项目编号！”）；
}
});
var$previewL=$（“#裁剪大”），
widthL=$previewL.width（）；
var$previewS=$（“#裁剪小”），
宽度=$previewS.width（）；
var$largeInputImage=$（“#inputImage”），
URL=window.URL | | window.webkitURL，
布洛布尔；
$（“#重置大图像”）。单击（函数（）{
$largeImage.crapper（'reset'）；
});
如果（URL）{
$largeInputImage.change（函数（）{
var files=this.files，
文件
这个宽度=0；
这个高度=0；
if（files&&files.length）{
file=文件[0]；
img=新图像（）；
img.onload=函数（）{
imageLoaded（this.width、this.height、文件）
};
img.onerror=函数