CODEWITHSUNDEEP
javascriptjqueryfunctioncanvascrop
necroface
necroface

Reputation: 3465

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

Upvotes: 4

Views: 12116

Answers (5)

Disapamok
Disapamok

Reputation: 1475

Even if you are with jQuery you have to import the cropper library file,

<script src="/plugin/cropper/cropper.js"></script>
<script src="/plugin/cropper/jquery-cropper.js"></script>
<link href="'/plugin/cropper/cropper.css'" rel="stylesheet" type="text/css"/>

Remember! You still have to have jQuery above this all.

Upvotes: 0

sudhansu sinha
sudhansu sinha

Reputation: 1

This will work definitely >> after following every step correctly as mention in link-https://www.npmjs.com/package/ngx-image-editor .
do only this.>>> goto your angular node module find >>>ngx-image-editor/esm5/ngx-image-editor.js >>> here you can import>>>import {default as Cropper} from 'cropperjs'; and refresh your node module and save ...

Upvotes: 0

吴承健
吴承健

Reputation: 1

Be sure to download the correct package with

npm install cropper

Please don't use this

npm install cropperjs

as Cropper.js is not a jQuery plugin.

Upvotes: 0

tcooc
tcooc

Reputation: 21209

First, make sure you have the library loaded with jquery:

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

Cropper is a jquery extension, thus instead of:

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

do:

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

Upvotes: 1

Roope
Roope

Reputation: 4507

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].

Upvotes: 4

Related Questions