Не могу инициализировать cropper.js (Uncaught TypeError: image.cropper не является функцией в FileReader.oFReader.onload) - PullRequest
Новая
       27

Не могу инициализировать cropper.js (Uncaught TypeError: image.cropper не является функцией в FileReader.oFReader.onload)

1 голос
/ 08 мая 2019

Я использую 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>

Вот что я делаю, чтобы инициализировать Кроппер. 

$(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");).

1 Ответ

0 голосов
/ 16 мая 2019

чтобы исправить это, я просто переместил следующий код в тело моей страницы. 

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