1

我正在尝试将图像裁剪器添加到我正在处理的网站中。我基于它的示例在这里：

https://jsfiddle.net/Twisty/afb76b7f/8/

JS 面板声称它是纯 javascript，但它也使用 JQuery（如果我没记错的话，根本不熟悉它）。我正在尝试删除它，以使网站尽可能易于维护，但出现错误。

HTML：

<div id="page">
    <div id="demo-basic">
    </div>
</div>

CSS：

#page
{
    background: #FFF;
    padding: 20px;
    margin: 20px;
}

#demo-basic {
  width: 200px;
  height: 300px;
}

JS

$(function() {
    var basic = $('#demo-basic').croppie ( {
        viewport: {
            width: 150,
            height: 150
        }
    });
    basic.croppie('bind', {
        url: 'https://i.imgur.com/xD9rzSt.jpg',
      });
});

所以，据我了解，第一个 $( function () ) 可以通过调用 onLoad 方法来简化， $('demo-croppie' ) 可以通过使用 document.getElementById ( 'demo-croppie' ) 来简化

所以，页面导入croppie javascript文件

croppie.jscroppie.min.js

并试图像这样简化脚本（页面正文的 onLoad 事件）

var basic = document.getElementById('demo-basic').croppie({
    viewport: {    
        width: 150,
        height: 150
    }
});

basic.croppie('bind', {
    url: previewPictureSource,
});

但我得到一个参考错误：

ReferenceError: croppie is not defined

我无法在任何地方找到croppie 函数，也无法理解如何将它与对象相关联。

这个问题有明显的解决方案吗？

如果有人有更多建议，我也很乐意尝试使用方形结果图像裁剪图像的任何其他库

4

1 回答 1

1

您无法调用 .croppie() ，basic因为您使用 VanillaJS 对其进行了初始化。但是，您可以直接调用 .bind() ：

basic.bind({                                                                 
    url: previewPictureSource
});

文档指定您可以通过以下两种方式与 Croppie 对象进行交互：

// with jQuery
$('#item').croppie(method, args);
// with VanillaJS
croppieObject.method(args);

在此处查看文档：https ://foliotek.github.io/Croppie/

于 2019-08-31T22:11:51.397 回答