Javascript модал обрезать существующие изображения?как перебрать список модалов с помощью функции js для их обработки? - PullRequest
Новая
       45

Javascript модал обрезать существующие изображения?как перебрать список модалов с помощью функции js для их обработки?

1 голос
/ 19 сентября 2019

У меня есть страница с несколькими изображениями, загруженными пользователем, и пользователь может выбрать часть этих изображений для отправки в форме (только координаты x, y, h, w), поэтому я сделал модальное для каждого изображения, кроме моегопроблема в функции javascript, так как она не запускает показ мод, и я пока не очень знаком с javascript.

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

Я использую cropper.js, чтобы получить данные обрезки, и они успешно загрузились, когда я попробовал их в обычной форме загрузки файла, где была одна форма на странице, и модальное поле было вызвано полем файла, но теперь яхочу использовать его с уже существующим изображением.

список изображений: 

 <div class="row">
 {% for image in Patient_detail.images.all %}
   <div class="col-md-4 img-box">
       <div class="card mb-4 shadow-sm">
             <a href="{{ image.pre_analysed.url }}" data-lightbox="patient's images" >
                 <img src="{{ image.pre_analysed.url }}" class="img-thumbnail" id="img{{image.pk}}" >
                    </a>
                 <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                     <div class="btn-group">
                                  {% endif %}
     <form method="POST" enctype="multipart/form-data"
    action="{%url 'patients:image_crop' pk=image.pk %}" id="formUpload{{image.pk}}">
          <input type="hidden" name="x" id="id_x{{image.pk}}">
          <input type="hidden" name="y" id="id_y{{image.pk}">
          <input type="hidden" name="width" id="id_width{{image.pk}">
          <input type="hidden" name="height" id="id_height{{image.pk}">
                 </form>
                 <button type ="button" class="btn btn-sm btn-outline-defaul" id="crop{{image.pk}}">Crop</button>
                    </div>
                </div>
            </div>
          </div>
        </div>
      {% endfor %}
 </div>

и модальное 

 {% for image in Patient_detail.images.all %}
    <div class="modal fade" id="modalCrop{{image.pk}}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Crop the photo</h4>
      </div>
      <div class="modal-body">
        <img src="" id="image{{image.pk}}" style="max-width: 100%;">
      </div>
      <div class="modal-footer">
        <div class="btn-group pull-left" role="group">
          <button type="button" class="btn btn-default js-zoom-in">
            <span class="glyphicon glyphicon-zoom-in"></span>
          </button>
          <button type="button" class="btn btn-default js-zoom-out">
            <span class="glyphicon glyphicon-zoom-out"></span>
          </button>
        </div>
        <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
        <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
      </div>
    </div>
  </div>
</div>
    {% endfor %}

и функция для запуска модального кадрирования: 

 $(function () {

     {% for image in Patient_detail.images.all %}
      /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
      $("#crop{{image.pk}}").click(function () {
            var img_src = document.getElementById("img{{image.pk}}").src
            $("#image{{image.pk}}").attr("src", img_src);
            $("#modalCrop{{image.pk}}").modal("show");
          }
      });
    {% endfor %}

     {% for image in Patient_detail.images.all %}
      /* SCRIPTS TO HANDLE THE CROPPER BOX */
      var $image = $("#image{{image.pk}}");
      var cropBoxData;
      var canvasData;
      $("#modalCrop{{image.pk}}").on("shown.bs.modal", function () {
        $image.cropper({
          viewMode: 1,
          aspectRatio: 1/1,
          minCropBoxWidth: 200,
          minCropBoxHeight: 200,
          ready: function () {
            $image.cropper("setCanvasData", canvasData);
            $image.cropper("setCropBoxData", cropBoxData);
          }
        });
      }).on("hidden.bs.modal", function () {
        cropBoxData = $image.cropper("getCropBoxData");
        canvasData = $image.cropper("getCanvasData");
        $image.cropper("destroy");
      });

      $(".js-zoom-in").click(function () {
        $image.cropper("zoom", 0.1);
      });

      $(".js-zoom-out").click(function () {
        $image.cropper("zoom", -0.1);
      });
    {% endfor %}

     {% for image in Patient_detail.images.all %}
      /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
      $(".js-crop-and-upload").click(function () {
        var cropData = $image.cropper("getData");
        $("#id_x{{image.pk}}").val(cropData["x"]);
        $("#id_y{{image.pk}}").val(cropData["y"]);
        $("#id_height{{image.pk}}").val(cropData["height"]);
        $("#id_width{{image.pk}}").val(cropData["width"]);
        $("#formUpload{{image.pk}}").submit();
      });
    {% endfor %}

    });

Iиспользуйте синтаксис шаблона django для итерации по изображению и назначения pks.и я получаю в консоли

SyntaxError: отсутствует) после списка аргументов

Update1:

Я сделал модальное отображение, но окно обрезки не сделалне показывать вот что я изменил.Я сделал кнопку data-toggle до modal и сделал data-target для модального id и удалил функцию, которая обрабатывает модальное. 

 <button type ="button" class="btn btn-sm btn-outline-defaul" id="crop{{image.pk}}" data-toggle="modal"
                                          data-target="#modalcrop{{ image.pk }}">Crop</button>

, и теперь сообщение об ошибке не отображаетсяв консоли.но я получаю это сейчас

ReferenceError: $ изображение не определено

...