无法初始化cropper.js (未捕获的TypeError: image.cropper不是FileReader.oFReader.onload处的函数)

Question

我正在使用cropper.js，当我试图初始化时，我得到了错误的Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload。我已经从我做的最后一个项目中复制了代码，在那个项目中它可以正常工作。

我已经尝试了cropper和cropper.js，但都不起作用。我把裁剪器导入到html，就像这样，文档的头部。

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/cropperjs/dist/cropper.js"></script>
<link href="node_modules/cropperjs/dist/cropper.css" rel="stylesheet">
<script src="node_modules/jquery-cropper/dist/jquery-cropper.js"></script>

我的表单与其中的其他字段类似。

<form action="backend/send.php" method="post">
   ...(more html with the other fields)
   <p>Imagem Cabeçalho:<br>
      <label class="form-filebutton">Carregar Imagem
         <input type="file" id="imagem" name="imagem" accept="image/png, image/jpeg, image/JPEG, image/jpeg2000, image/jpg, image/gif">
      </label>
   </p>
   ...(more html with the other fields)
</form>

图像应该出现在这里。

<div class="div-preview hidden">
   <img class="img-preview" id="img-preview">
   ...(more html with buttons to edit the image)
</div>

下面是我初始化Cropper的方法。

$(function() {
   var image = $("#img-preview"); //where the image should appear
   //Initialize cropper when image is loaded in the form
   $("input:file").change(function() {
      $(".div-preview").removeClass("hidden"); //show the elements

      var oFReader = new FileReader();

      oFReader.readAsDataURL(this.files[0]);
      oFReader.onload = function (oFREvent) {
         image.cropper("destroy"); //In case I change the image
         image.attr("src", this.result); 
         image.cropper({
            aspectRatio: 1 / 1,
            viewMode: 1,
            toggleDragModeOnDblclick: false,
            dragMode: "move",
            crop: function(e) {}
         });
      };
   });
   ...(more jQuery and JavaScript to control the buttons)
});

我希望打开裁剪器，但在第一个裁剪器(image.cropper("destroy");)中得到错误Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload。

Answer 1

为了解决这个问题，我只需将以下代码移到我的页面主体中。

<script src="node_modules/cropperjs/dist/cropper.js"></script>
<script src="node_modules/jquery-cropper/dist/jquery-cropper.js"></script>