如何使用 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 放在 on-change 函数之外，这样它就不会运行多次

$(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>

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

How to crop with two different aspect ratio images dynamically using cropper.js?

javascript

jquery

cropperjs