cropper 不是函数 on 不是函数

Question

我正在尝试使用 cropper plugin by fengyuanchen 但遇到了一个不可能发生的错误

我经常遇到 Uncaught TypeError: canvas.cropper is not a function 即使我已经尝试了我在你的指南中搜索的所有内容甚至问题但我无法解决它。当我的按钮被点击时，我尝试在 canvas 中初始化裁剪器，像这样

$('#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.

现在，var canvas=$('#image-display canvas')[0]; 之后的 canvas 不是选定元素。它是所选元素的第一个属性。 $() 将 return 一个选定的元素（如果找到，显然），但 $()[0] 完全是另外一回事。删除 [0].

Answer 2

首先，确保你已经加载了 jquery 的库：

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

Cropper 是一个 jquery 扩展，因此代替了：

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

做：

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

Answer 3

一定要用

下载正确的包

npm install cropper

请不要使用这个

npm install cropperjs

因为 Cropper.js 不是 jQuery 插件。

Answer 4

这肯定有效 >> 按照 link-https://www.npmjs.com/package/ngx-image-editor 中提到的每一步正确执行后。
只做这个。>>> 转到你的 angular 节点模块找到 >>>ngx-image-editor/esm5/ngx-image-editor.js >>> 在这里你可以导入>>>从 'cropperjs' 导入 {default as Cropper};并刷新您的节点模块并保存 ...

cropper 不是函数 on 不是函数

cropper is not a function on is not a function

javascript

jquery

canvas

function

crop