jquery - 为什么#btnCrop 上的“mouseup”事件会多次触发?
问题描述
Cropper.js 适用于第一张图片。当我上传一张新图片然后裁剪它时,#result 会附加两张图片。对于第三个上传的图像,#result 附加了三个(!)图像。我自己无法弄清楚为什么这个函数 ($("#btnCrop").on("mouseup", function()) 每次上传新图像时都会执行得越来越多。有什么想法吗?
<div id="cropper" class="field personalization">
<div class="field-input">
<div class="radioOptions">
<div class="radio">
<input type="radio" id="locket-upload" value="locket-upload" name="personalization"/>
<label for="locket-upload">Locket Photo</label>
</div>
</div>
</div>
<div class="reveal-if-active" id="reveal-if-active-locket-upload">
<p class="line-item-property__field">
<input type="file" id="fileInput" accept="image/*" />
<div id="abrakadabra" class="image-container">
<img id="ifc" src="#" alt="your image" />
</div>
<div id="result"></div>
<div class="buttons-container">
<input type="button" id="btnCrop" value="Crop" />
<input type="button" id="btnDestroy" value="Upload new Image" />
</div>
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-cropper@1.0.0/dist/jquery-cropper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.css" rel="stylesheet">
<script>
$(document).ready(function(){
var image = $('#ifc');
var result = $('#result');
var counter = 0;
$("#fileInput").on("input", function(){
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
image.attr('src', e.target.result);
$("#abrakadabra").css("display", "block");
$(".buttons-container").css("display", "flex");
var cropper = image.cropper({
aspectRatio: Math.sqrt(3)/2,
viewMode: 2,
dragMode: 'move'
});
$("#btnCrop").on("mouseup", function(){
var croppedImageDataURL = image.cropper('getCroppedCanvas', 'maxWidth: 300', 'fillColor: #fff').toDataURL("image/png");
$("#abrakadabra").css("display", "none");
$('#result').append( $('<img>').attr('src', croppedImageDataURL) );
});
$("#btnDestroy").on("mouseup", function(){
image.attr('src', "#");
image.cropper('destroy');
result.empty();
$("#fileInput").val("");
$("#abrakadabra, .buttons-container").css("display", "none");
$('html, body').animate({scrollTop: ($("#fileInput").offset().top - 150)}, 500);
});
};
reader.readAsDataURL(this.files[0]);
}
});
});
</script>
解决方案
问题是每次选择图片时,都会发现点击事件$("#btnCrop")
。所以这就是它运行多次的原因。
解决方案是将点击事件移出。看看下面的代码。
$(document).ready(function() {
var image = $('#ifc');
var result = $('#result');
var counter = 0;
$("#fileInput").on("input", function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
image.attr('src', e.target.result);
$("#abrakadabra").css("display", "block");
$(".buttons-container").css("display", "flex");
var cropper = image.cropper({
aspectRatio: Math.sqrt(3) / 2,
viewMode: 2,
dragMode: 'move'
});
};
reader.readAsDataURL(this.files[0]);
}
});
$("#btnCrop").on("mouseup", function() {
console.log("CROP")
var croppedImageDataURL = image.cropper('getCroppedCanvas', 'maxWidth: 300', 'fillColor: #fff').toDataURL("image/png");
$("#abrakadabra").css("display", "none");
$('#result').append($('<img>').attr('src', croppedImageDataURL));
});
$("#btnDestroy").on("mouseup", function() {
image.attr('src', "#");
image.cropper('destroy');
result.empty();
$("#fileInput").val("");
$("#abrakadabra, .buttons-container").css("display", "none");
$('html, body').animate({
scrollTop: ($("#fileInput").offset().top - 150)
}, 500);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cropper" class="field personalization">
<div class="field-input">
<div class="radioOptions">
<div class="radio">
<input type="radio" id="locket-upload" value="locket-upload" name="personalization" />
<label for="locket-upload">Locket Photo</label>
</div>
</div>
</div>
<div class="reveal-if-active" id="reveal-if-active-locket-upload">
<p class="line-item-property__field">
<input type="file" id="fileInput" accept="image/*" />
<div id="abrakadabra" class="image-container">
<img id="ifc" src="#" alt="your image" />
</div>
<div id="result"></div>
<div class="buttons-container">
<input type="button" id="btnCrop" value="Crop" />
<input type="button" id="btnDestroy" value="Upload new Image" />
</div>
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-cropper@1.0.0/dist/jquery-cropper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.css" rel="stylesheet">
推荐阅读
- python - 保存pygame绘图
- python - 您如何将 100 个术语列表汇总为少量(约 5 个)重要术语?
- javascript - .then() 子句未执行
- angular - Angular material 10 日期选择器(mat-datepicker)与其他输入字段不对齐
- python - PyGame:对位于两个列表中的多个图像使用 img.get_rect() 并为它们使用唯一的宽度和高度变量
- ios - 集合视图单元格背景颜色在 reloadData() Swift/Firebase 上反转
- pandas - 从日期时间列中提取月份和年份的问题
- python - 如何运行 MySQL 数据库作为 Rasa 服务器的跟踪器存储?
- javascript - "?." 是什么意思?(问号后的点)在 JS 中的意思
- ionic4 - 离子 5 电容器无法打开文件