0

我有一个页面，其中存在多个图像，我想让用户能够裁剪其中的任何一个，所以我制作了一个 for 循环来为每个图像制作一个模式，并且我也循环了 js 函数。

这是我的模态。

     {% 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 %}

这是我使用的功能

  {% for image in Patient_detail.images.all %}
 $(function () {

      /* 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{{imahge.pk}}").modal("show");
          }
      });

      /* 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);
      });

      /* 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 %}

但问题是模态永远不会显示，所以我真的不明白有什么问题？我应该怎么做才能使这项工作是显示模式的第一个功能的问题是否有更简单的方法来做到这一点我想要的是用户能够指定他们想要的图像的一部分？

4

0 回答 0