Как мне остановить Javascript Foliotek's Croppie от перезаписи ранее обрезанных и загруженных изображений на той же странице с последним загруженным изображением - PullRequest
Новая
       34

Как мне остановить Javascript Foliotek's Croppie от перезаписи ранее обрезанных и загруженных изображений на той же странице с последним загруженным изображением

0 голосов
/ 20 октября 2019

Сценарий: я загружаю и обрезаю до 4 изображений на странице. Как только изображение обрезается, оно появится на странице. Однако, когда я иду, чтобы загрузить и обрезать второе изображение, это второе изображение появляется на экране дважды;существенно перезаписывая первое загруженное мной изображение.

Мне удалось выяснить, что в следующем разделе Javascript, если я добавлю туда alert('is repeating');, оно сработает столько раз, сколько у меня есть. загрузил и обрезал изображение. Так что, если я нахожусь на втором ходу загрузки изображения, предупреждение будет срабатывать дважды на этапе обрезки. Если я в третий раз загружаю и обрезаю изображение, предупреждение сработает 3 раза и т. Д.

Желаемый результат заключается в том, что при загрузке и обрезке первого изображения оно появится под элементом изображения с идентификатором. 

id="profile-pic-1"

Затем, когда я загружу и обрежу второе изображение, оно появится под элементом изображения с идентификатором 

id="profile-pic-2"

и так далее, и так далее.

Если кто-то может предложить решение, которое было бы удивительным. В последние пару дней я безрассудно ломал голову и отчаянно искал в Google решение проблемы * 

 $('#crop-img-btn').click(function() {


      $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
      }).then(function(resp) {

        $('#Pic' + imageSelector + 'Url').val(resp);
        $('#profile-pic-' + imageSelector).attr("src", resp);

        $('#crop-modal').modal('hide');

        $uploadCrop.croppie('destroy');

      });
    })

[HTML и Javascript ниже] 

var Demo = (function() {



  function demoUpload(imageSelector) {


    var $uploadCrop;





    function readFile(input) {

      if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function(e) {

          $('#crop-modal').modal('show');
          $('#image-editor').addClass('ready');



          $uploadCrop.croppie('bind', {
            url: e.target.result

          }).then(function() {
            console.log('jQuery bind complete');
          });

        }

        reader.readAsDataURL(input.files[0]);

      } else {
        //swal("Sorry - you're browser doesn't support the FileReader API");
      }

    }

    $uploadCrop = $('#image-editor').croppie({
      enableExif: true,
      showZoomer: false,
      viewport: {
        width: 262,
        height: 211,
        type: 'square'
      },
      boundary: {
        width: 272,
        height: 221
      }
    });



    $('#upload-pic' + imageSelector).on('change', function() {
      readFile(this);
    });
    // $('#upload-pic2').on('change', function () { readFile(this); });



    $('#crop-img-btn').click(function() {


      $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
      }).then(function(resp) {

        $('#Pic' + imageSelector + 'Url').val(resp);
        $('#profile-pic-' + imageSelector).attr("src", resp);

        $('#crop-modal').modal('hide');

        $uploadCrop.croppie('destroy');

      });
    })



  }


  function init(imageSelector) {
    // Things to do on initial page load
    //$(".profile-pic").attr("src", "/assets/images/blank.png");
    // This ensures uploaded image re-renders on page re-load
    //$('#Pic' + imageSelector + 'Url').attr("value", $('#profile-pic-' + imageSelector).attr("src"));

    demoUpload(imageSelector);

  }

  return {
    init: init
  };
})();
<div class="row">

  <div class="col-6 col-lg-3 pic-padding" id="pdiv1">

    <div id="display-pic">

      <div class="profile-pic-container">
        <img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-1" id="profile-pic-1" />
        <label for="upload-pic1" class="pic-control-bg cabinet">
								<div id="img-action-icon">

                                    <img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">



								</div>
                            </label>
      </div>


      <input class="hidden" type="file" id="upload-pic1" name="pic1" class="upload-btn" accept="image/*">
      <input type="text" id="Pic1Url" name="Pic1Url" class="hidden">

    </div>

  </div>

  <div id="pdiv2" class="col-6 col-lg-3 pic-padding">

    <div id="display-pic">

      <div class="profile-pic-container">
        <img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-2" id="profile-pic-2" />
        <label for="upload-pic2" class="pic-control-bg cabinet">
								<div id="img-action-icon">
									<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
								</div>
                            </label>
      </div>
      <input class="hidden" type="file" id="upload-pic2" name="pic2" class="upload-btn" accept="image/*">
      <input type="text" id="Pic2Url" name="Pic2Url" class="hidden">

    </div>



  </div>


  <div id="pdiv3" class="col-6 col-lg-3 pic-padding">

    <div id="display-pic">

      <div class="profile-pic-container">
        <img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-3" id="profile-pic-3" />
        <label for="upload-pic3" class="pic-control-bg cabinet">
								<div id="img-action-icon">
									<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
								</div>
                            </label>
      </div>
      <input class="hidden" type="file" id="upload-pic3" name="pic3" class="upload-btn" accept="image/*">
      <input type="text" id="Pic3Url" name="Pic3Url" class="hidden">

    </div>

  </div>

  <div id="pdiv4" class="col-6 col-lg-3 pic-padding">

    <div id="display-pic">

      <div class="profile-pic-container">
        <img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-4" id="profile-pic-4" />
        <label for="upload-pic4" class="pic-control-bg cabinet">
								<div id="img-action-icon">
									<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
								</div>
                            </label>
      </div>
      <input class="hidden" type="file" id="upload-pic4" name="pic4" class="upload-btn" accept="image/*">
      <input type="text" id="Pic4Url" name="Pic4Url" class="hidden">

    </div>

  </div>

</div>

<!-- IMAGE EDITOR START -->
<!-- Modal -->
<div class="modal" id="crop-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
      </div>
      <div class="modal-body" id="image-editor">

      </div>
      <div class="modal-footer">
        <button type="button" id="crop-img" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="crop-img-btn" class="btn btn-primary">Crop</button>
      </div>
    </div>
  </div>
</div>
<!-- END Modal -->


<script>
  var $imageSelector;

  // Done to work out which image is being uploaded so croppie can output the image to the correct div
  $('input[type="file"]').click(function() {
    switch ($(this).attr('id')) {
      case 'upload-pic1':
        $imageSelector = 1;
        Demo.init($imageSelector);
        break;
      case 'upload-pic2':
        $imageSelector = 2;
        Demo.init($imageSelector);
        break;
      case 'upload-pic3':
        $imageSelector = 3;
        Demo.init($imageSelector);
        break;
      case 'upload-pic4':
        $imageSelector = 4;
        Demo.init($imageSelector);
        break;
      default:
        $imageSelector = 0;
        Demo.init($imageSelector);         
    }
  });
</script>
...