场景是我正在上传并裁剪最多 4 张图像到一个页面。裁剪图像后，它将显示在页面上。但是，当我上传并裁剪第二张图片时，第二张图片会在屏幕上出现两次；基本上也覆盖了我上传的第一张图片。
我已经设法在 Javascript 的以下部分中解决了这一点，如果我在其中放置一个alert('is repeating');，它将触发我上传和裁剪图像的次数。因此，如果我在第二轮上传图像，则警报将在裁剪阶段触发两次。如果我第三次上传和裁剪图像，警报将触发 3 次，依此类推。
期望的结果是，当我上传并裁剪第一张图像时，它将出现在带有 ID 的图像元素下
id="profile-pic-1"
然后当我上传并裁剪第二张图片时，它将出现在带有 ID 的图片元素下
id="profile-pic-2"
等等等等。
如果有人可以提供一个很棒的解决方案。在过去的几天里，我一直在绞尽脑汁并疯狂地在谷歌上搜索解决方案，但没有运气！！
$('#crop-img-btn').click(function() {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(resp) {
$('#Pic' + imageSelector + 'Url').val(resp);
$('#profile-pic-' + imageSelector).attr("src", resp);
$('#crop-modal').modal('hide');
$uploadCrop.croppie('destroy');
});
})
[HTML和Javascript如下]
var Demo = (function() {
function demoUpload(imageSelector) {
var $uploadCrop;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#crop-modal').modal('show');
$('#image-editor').addClass('ready');
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function() {
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(input.files[0]);
} else {
//swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#image-editor').croppie({
enableExif: true,
showZoomer: false,
viewport: {
width: 262,
height: 211,
type: 'square'
},
boundary: {
width: 272,
height: 221
}
});
$('#upload-pic' + imageSelector).on('change', function() {
readFile(this);
});
// $('#upload-pic2').on('change', function () { readFile(this); });
$('#crop-img-btn').click(function() {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(resp) {
$('#Pic' + imageSelector + 'Url').val(resp);
$('#profile-pic-' + imageSelector).attr("src", resp);
$('#crop-modal').modal('hide');
$uploadCrop.croppie('destroy');
});
})
}
function init(imageSelector) {
// Things to do on initial page load
//$(".profile-pic").attr("src", "/assets/images/blank.png");
// This ensures uploaded image re-renders on page re-load
//$('#Pic' + imageSelector + 'Url').attr("value", $('#profile-pic-' + imageSelector).attr("src"));
demoUpload(imageSelector);
}
return {
init: init
};
})();<div class="row">
<div class="col-6 col-lg-3 pic-padding" id="pdiv1">
<div id="display-pic">
<div class="profile-pic-container">
<img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-1" id="profile-pic-1" />
<label for="upload-pic1" class="pic-control-bg cabinet">
<div id="img-action-icon">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</div>
</label>
</div>
<input class="hidden" type="file" id="upload-pic1" name="pic1" class="upload-btn" accept="image/*">
<input type="text" id="Pic1Url" name="Pic1Url" class="hidden">
</div>
</div>
<div id="pdiv2" class="col-6 col-lg-3 pic-padding">
<div id="display-pic">
<div class="profile-pic-container">
<img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-2" id="profile-pic-2" />
<label for="upload-pic2" class="pic-control-bg cabinet">
<div id="img-action-icon">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</div>
</label>
</div>
<input class="hidden" type="file" id="upload-pic2" name="pic2" class="upload-btn" accept="image/*">
<input type="text" id="Pic2Url" name="Pic2Url" class="hidden">
</div>
</div>
<div id="pdiv3" class="col-6 col-lg-3 pic-padding">
<div id="display-pic">
<div class="profile-pic-container">
<img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-3" id="profile-pic-3" />
<label for="upload-pic3" class="pic-control-bg cabinet">
<div id="img-action-icon">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</div>
</label>
</div>
<input class="hidden" type="file" id="upload-pic3" name="pic3" class="upload-btn" accept="image/*">
<input type="text" id="Pic3Url" name="Pic3Url" class="hidden">
</div>
</div>
<div id="pdiv4" class="col-6 col-lg-3 pic-padding">
<div id="display-pic">
<div class="profile-pic-container">
<img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-4" id="profile-pic-4" />
<label for="upload-pic4" class="pic-control-bg cabinet">
<div id="img-action-icon">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</div>
</label>
</div>
<input class="hidden" type="file" id="upload-pic4" name="pic4" class="upload-btn" accept="image/*">
<input type="text" id="Pic4Url" name="Pic4Url" class="hidden">
</div>
</div>
</div>
<!-- IMAGE EDITOR START -->
<!-- Modal -->
<div class="modal" id="crop-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="image-editor">
</div>
<div class="modal-footer">
<button type="button" id="crop-img" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="crop-img-btn" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>
<!-- END Modal -->
<script>
var $imageSelector;
// Done to work out which image is being uploaded so croppie can output the image to the correct div
$('input[type="file"]').click(function() {
switch ($(this).attr('id')) {
case 'upload-pic1':
$imageSelector = 1;
Demo.init($imageSelector);
break;
case 'upload-pic2':
$imageSelector = 2;
Demo.init($imageSelector);
break;
case 'upload-pic3':
$imageSelector = 3;
Demo.init($imageSelector);
break;
case 'upload-pic4':
$imageSelector = 4;
Demo.init($imageSelector);
break;
default:
$imageSelector = 0;
Demo.init($imageSelector);
}
});
</script>