如何使用cropper.js动态裁剪两个不同的长宽比图像？

Question

我有一个表单，用户可以在其中选择个人资料图像和封面图像。

所以我正在使用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">&times;</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>

当我第一次打开图像时，它对于每种类型的图像均能完美工作。但是，当我尝试下一张图像时，发生错误，将结果发送到上一个字段。

我要去哪里错了？

Answer 1

我将 $ modal.on 放在了自动更改功能之外，因此它不会多次运行

$(document).ready(function () {
        var imgw = ''
        var imgh = ''
        var imgtype = ''
        var $modal = $('#modal');
        var imageform = ''
        var cropimage = document.getElementById('mimagecrop');
        var cropper = [];

        $( ".imgcrop" ).change(function(){
            imgw = $(this).data('imgw');
            imgh = $(this).data('imgh');
            imgtype = $(this).data('imgtype');
            imageform = document.getElementById('eimg'+imgtype);
                  
            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]);
            }
            
            
          $( "#cropsave" ).click(function(){
              var canvas;
              $modal.modal('hide');
              if (cropper[imgtype]) {
                  canvas = cropper[imgtype].getCroppedCanvas({ width: imgw, height: imgh });
                  imageform.src = canvas.toDataURL();
              }
          });
            
         });
         
          $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;
          });
    });

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">&times;</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>