0

我正在尝试将裁剪部分添加到图像上传中。我正在转换本教程。我添加了 materialie.js 一点，那就是把事情扔掉了。

javascript 这部分工作，或多或少。当我单击按钮时，会出现一个带有图像的框。我不能点击其他任何东西。

$('.modal').modal({
        dismissible: true
        });
        $(function () {
          /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
          $("#id_file").change(function () {
            if (this.files && this.files[0]) {
              var reader = new FileReader();
              reader.onload = function (e) {
                $("#image").attr("src", e.target.result);
                $("#modalCrop").modal('open');
              }
              reader.readAsDataURL(this.files[0]);
            }
          });

现在我得到一张看起来像这样的照片在此处输入图像描述

当我单击蓝色crop and upload按钮时，我收到此控制台错误。

$image.cropper is not a function

这导致错误

var cropData = $image.cropper("getData");

有谁知道为什么会这样？提前致谢。下面是我的其余代码。

这部分不起作用。{% 阻止 javascript %} 

          /* SCRIPTS TO HANDLE THE CROPPER BOX */
          var $image = $("#image");
          var cropBoxData;
          var canvasData;
          $("#modalCrop").on("shown.bs.modal", function () {
            $image.cropper({
              viewMode: 1,
              aspectRatio: 1/1,
              minCropBoxWidth: 300,
              minCropBoxHeight: 300,
              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").val(cropData["x"]);
            $("#id_y").val(cropData["y"]);
            $("#id_height").val(cropData["height"]);
            $("#id_width").val(cropData["width"]);
            $("#formUpload").submit();
          });
        });
      </script>
    {% endblock %}

html

<form method="post" enctype="multipart/form-data" id="formUpload">
{% csrf_token %}
{{ form }}


    <!-- MODAL TO CROP THE IMAGE -->
  <div class="modal fade" id="modalCrop">
    <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" 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>
4

0 回答 0