裁剪器不是函数 on 不是函数答案

【问题标题】：cropper is not a function on is not a function裁剪器不是函数 on 不是函数
【发布时间】：2017-02-21 16:13:00
【问题描述】：

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

我经常进入Uncaught TypeError: canvas.cropper is not a function 即使我已经尝试了我在您的指南中搜索的所有内容，甚至问题，但我无法解决它。单击按钮时，我尝试在画布中初始化裁剪器，如下所示

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

【问题讨论】：

同时发布您的 HTML。第二行后canvas的值是多少？

标签： javascript jquery function canvas crop

【解决方案1】：

来自 jQuery 文档：

将一个或多个事件的事件处理函数附加到所选元素。

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

【讨论】：

还是一样。没有什么变化。还是那个错误
谢谢。我修好了它。应该是$canvas和$canvas.cropper，去掉[0]后也是$canvas.on

【解决方案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');

【讨论】：

在添加 Cropper 之前，我确实包含了 jQuery。无论如何，我成功地修复了它。非常感谢

【解决方案3】：

请务必使用

下载正确的包

npm 安装裁剪器

请不要使用这个

npm 安装cropperjs

因为 Cropper.js 不是 jQuery 插件。

【讨论】：

【解决方案4】：

这肯定会起作用>>在正确遵循链接-https://www.npmjs.com/package/ngx-image-editor中提到的每一步之后。
只做这个。>>> 转到你的角度节点模块找到 >>>ngx-image-editor/esm5/ngx-image-editor.js >>> 在这里你可以导入>>>import {default as Cropper} from 'cropperjs ';并刷新您的节点模块并保存...

【讨论】：