1

我正在使用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)
});

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

4

1 回答 1

0

为了解决这个问题，我只是将以下代码移到了我的页面正文中。

<script src="node_modules/cropperjs/dist/cropper.js"></script>
<script src="node_modules/jquery-cropper/dist/jquery-cropper.js"></script>
于 2019-05-16T16:27:45.017 回答