我有一个表单，用户将在其中选择个人资料图片和封面图片。
所以我使用Cropper.js以正确的大小打开和裁剪图像。
为了不必不必要地重复代码，我考虑过动态地编写脚本，以便它在两种情况下都能正常工作。
在输入文件字段中，我输入了将要打开的文件类型，以及宽度和高度的尺寸以这种方式
data-imgtype="logo" data-imgw="500" data-imgh="500"
因此，我使用相同的模态进行剪辑，并尝试根据所选选项为每个目的地分开。
你可以在这里看到完整的代码：
$(document).ready(function () {
$( ".imgcrop" ).change(function(){
var imgw = $(this).data('imgw');
var imgh = $(this).data('imgh');
var imgtype = $(this).data('imgtype');
var $modal = $('#modal');
var imageform = document.getElementById('eimg'+imgtype);
var cropimage = document.getElementById('mimagecrop');
var cropper = [];
var input = this;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
cropimage.src = e.target.result;
$modal.modal('show');
}
reader.readAsDataURL(input.files[0]);
}
$modal.on('shown.bs.modal', function () {
cropper[imgtype] = new Cropper(cropimage, {
aspectRatio: imgw / imgh,
viewMode: 3,
});
});
$modal.on('hidden.bs.modal', function () {
cropper[imgtype].destroy();
cropper[imgtype] = null;
});
$( "#cropsave" ).click(function(){
var canvas;
$modal.modal('hide');
if (cropper[imgtype]) {
canvas = cropper[imgtype].getCroppedCanvas({ width: imgw, height: imgh });
imageform.src = canvas.toDataURL();
}
});
});
});img#eimglogo {
width: 150px;
}
img#eimgcapa {
width: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fengyuanchen.github.io/cropperjs/css/cropper.css" rel="stylesheet"/>
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<label class="label">
<img class="img-thumbnail img-responsive" id="eimglogo" src="https://via.placeholder.com/500">
<input type="file" class="sr-only imgcrop" id="inputlogo" data-imgtype="logo" data-imgw="500" data-imgh="500" name="image" accept="image/*">
</label>
<label class="label">
<img class="img-thumbnail img-responsive" id="eimgcapa" src="https://via.placeholder.com/1280x600">
<input type="file" class="sr-only imgcrop" data-imgtype="capa" data-imgw="1280" data-imgh="600" id="inputcapa" name="image" accept="image/*">
</label>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Cortar Imagem</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<img id="mimagecrop" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="cropsave">Ok</button>
</div>
</div>
</div>
</div>当我第一次打开图像时，它适用于每种类型的图像。但是当我尝试下一张图片时，将结果发送到上一个字段时发生错误。
我哪里错了？