Question

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

我经常进入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 is not a function

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

Answer 1

来自jQuery文档：

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

现在，canvas之后的var canvas=$('#image-display canvas')[0];不是选定的元素。它是所选元素的第一个属性。 $()将返回一个选定的元素（如果找到，显然），但$()[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

按照链接-https://www.npmjs.com/package/ngx-image-editor中的说明正确正确地执行每个步骤之后，这肯定会>>。
>>>转到您的角度节点模块，找到>>> ngx-image-editor / esm5 / ngx-image-editor.js >>>在这里，您可以从'cropperjs中导入>>>导入{默认为Cropper} ';并刷新您的节点模块并保存...

cropper不是函数，不是函数

4 个答案: