necroface necroface - 1 month ago 6
Javascript Question

cropper is not a function on is not a function

I'm trying to make use of cropper plugin by fengyuanchen but meeting quite an impossible error

I constantly get into

Uncaught TypeError: canvas.cropper
is not a function even though I already tried everything I searched in your guide and even issues but I couldn't solve it. I try to initialize a cropper in canvas when my button is clicked, like this

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


I'm completely in vain

There is also another error:
canvas.on is not a function


I don't know why. I already include jQuery 3.1

Answer

From the jQuery docs:

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

Now, canvas after var canvas=$('#image-display canvas')[0]; is not a selected element. It's the first property of the selected element. $() will return a selected element (if found, obviously), but $()[0] is something completely else. Drop the [0].