裁剪器不是一个函数，on不是一个函数。

Question

我正在尝试使用冯元琛的裁剪插件，但遇到了一个非常棘手的错误。

即使我已经尝试了您的指南和问题中搜索到的所有方法，我仍然不断遇到“Uncaught TypeError：canvas.cropper不是函数”的错误。当我单击按钮时，我尝试在画布中初始化裁剪器，就像这样。

$('#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不是一个函数

我不知道为什么。我已经包含了jQuery 3.1

- necroface

---

请发布您的HTML代码。在第二行之后，canvas的值是多少？ - Roope

Answer 1

从jQuery文档中得知：

为一个或多个事件附加一个事件处理函数到选择的元素上。

现在，变量canvas在var canvas=$('#image-display canvas')[0];之后不是一个选择的元素。它是选择元素的第一个属性。$()会返回选择的元素（如果找到的话），但$()[0]则完全不同。删除[0]即可。

- Roope

---

还是一样的。没有改变。仍然是那个错误。 - necroface

谢谢。我已经修复了。应该是$canvas和$canvas.cropper，还有在去掉[0]后的$canvas.on。 - necroface

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');

- tcooc

---

我在添加Cropper之前已经包含了jQuery。无论如何，我成功地解决了它。非常感谢。 - necroface

Answer 3

请确保下载正确的包：

npm install cropper

请不要使用以下命令：

npm install cropperjs

Cropper.js 不是一个 jQuery 插件。

- 吴承健

Answer 4

只要按照链接https://www.npmjs.com/package/ngx-image-editor中提到的每个步骤正确执行，这一定会起作用。
只需执行以下操作。>>> 转到您的Angular节点模块，找到 >>> ngx-image-editor/esm5/ngx-image-editor.js >>> 在此处可以导入>>> import {default as Cropper} from 'cropperjs'; 然后刷新您的节点模块并保存...

- sudhansu sinha

Answer 5

即使您使用jQuery，也必须导入裁剪库文件。

<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"/>

记住！你仍然必须在所有内容上方使用jQuery。

- Disapamok