javascript - Javascript 模态裁剪现有图像？如何使用 js 函数遍历模态列表来处理它们？

Question

我有一个页面，其中包含用户上传的多张图片，用户可以选择这些图片的一部分以表格形式提交（只是坐标 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 %}

    });

我使用 django 模板语法来遍历图像并分配 pks。我进入控制台

SyntaxError: missing ) 在参数列表之后

更新1：

我显示了模态框，但裁剪框没有显示这是我更改的内容。我将按钮data-toggle设置为模态modal并删除了处理模态的功能。data-targetid

 <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: $image 未定义

标签： javascriptjquerydjangodjango-templatescropperjs