Cropper ist keine Funktion auf keine Funktion

Question

Ich versuche Verwendung von cropper plugin by fengyuanchen die aber durchaus einen unmöglichen Fehler

ich ständig in Uncaught TypeError: canvas.cropper bekommen zu machen, ist keine Funktion, obwohl ich schon alles habe ich versucht, suchte Ihr Führer und sogar Probleme, aber ich konnte es nicht lösen. Ich versuche, einen Abschneider in Leinwand zu initialisieren, wenn meine Schaltfläche geklickt wird, wie diese

$('#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); 
         } 
        }); 
       }); 

Ich bin völlig vergeblich

Es gibt auch einen anderen Fehler: canvas.on is not a function

Ich weiß nicht, warum . Ich schließe bereits jQuery 3.1

Answer 1

Aus der jQuery docs:

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

Nun canvas nach var canvas=$('#image-display canvas')[0]; ist kein Element, ausgewählt. Es ist die erste Eigenschaft des ausgewählten Elements. $() wird ein ausgewähltes Element (wenn gefunden, natürlich) zurückgeben, aber $()[0] ist etwas ganz anderes. Lassen Sie die [0] fallen.

Answer 2

Erstens, stellen Sie sicher, dass Sie die Bibliothek mit Jquery geladen:

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

Cropper ist ein jquery Erweiterung, also statt:

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

tun:

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

Answer 3

Be sicher das richtige Paket mit

herunterladen

npm install cropper

Bitte nicht

npm install cropperjs

als Cropper.js verwenden kein jQuery-Plugin ist.