жнец не функция на это не функция

Question

Я пытаюсь использовать cropper plugin by fengyuanchen но встречи довольно невозможную ошибку

Я постоянно попасть в Uncaught TypeError: canvas.cropper не функция, хотя я уже попробовал все, что я искал в ваш гид и даже проблемы, но я не мог его решить. Я пытаюсь инициализировать провалится в полотне, когда моя кнопка нажата, как этот

$('#crop-mode').click(function(e){ 
        var canvas=$('#image-display canvas')[0]; 
        var options={ 
         viewMode:0, 
         dragMode:'crop', 
         aspectRatio: NaN, 
         preview:'.extra-preview', 
         responsive:true, 
         cropBoxMovable: true, 
         cropBoxResizable: true, 
         autoCropArea:0.8 
        }; 
        canvas.cropper(options); 
        canvas.on({ 
         'build.cropper': function (e) { 
          console.log(e.type); 
         }, 
         'built.cropper': function (e) { 
          console.log(e.type); 
         }, 
         'cropstart.cropper': function (e) { 
          console.log(e.type, e.action); 
         }, 
         'cropmove.cropper': function (e) { 
          console.log(e.type, e.action); 
         }, 
         'cropend.cropper': function (e) { 
          console.log(e.type, e.action); 
         }, 
         'crop.cropper': function (e) { 
          console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY); 
         }, 
         'zoom.cropper': function (e) { 
          console.log(e.type, e.ratio); 
         } 
        }); 
       }); 

Я совершенно напрасно

Существует также другая ошибка: canvas.on is not a function

Я не знаю, почему , Я уже включают в JQuery 3.1

Answer 1

Из документов JQuery:

Attach an event handler function for one or more events to the selected elements.

Теперь canvas после var canvas=$('#image-display canvas')[0]; не выбран элемент. Это первое свойство выбранного элемента. $() вернет выбранный элемент (если он найден, очевидно), но $()[0] - это нечто совсем другое. Снимите [0].

Answer 2

Во-первых, убедитесь, что у вас есть библиотека загружается с JQuery:

<script src="/path/to/jquery.js"></script> 
<script src="/path/to/cropper.js"></script> 

Кроппер является расширение JQuery, таким образом, вместо того, чтобы:

var canvas=$('#image-display canvas')[0]; 

сделать:

var canvas=$('#image-display canvas'); 

Answer 3

Be обязательно загрузите нужный пакет с

npm install cropper

Пожалуйста, не используйте этот

npm install cropperjs

, как Cropper.js не плагин JQuery.