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

Question

I have a form where the user will choose a profile image and a cover image.

So I'm using the Cropper.js to open and crop the image in the correct size.

In order not to have to repeat code unnecessarily, I thought about doing the script dynamically so that it works in both cases.

In the input file fields I put the file type that will be opened, and the dimensions of width and height in this way

data-imgtype="logo" data-imgw="500" data-imgh="500" 

So I use a same modal for clipping, and I try to separate for each destination according to the selected option.

You can see the complete code here:

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

When I open the image for the first time, it works perfectly for each type of image. But when I try for the next image, happens a error sending the result to the previous field.

Where am I going wrong?

Answer 1

I put $modal.on outside on-change function so it won't run multiple times

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