javascript - 使用裁剪来裁剪图像而无需jquery

我正在尝试将图像裁剪器添加到我正在工作的网站上。我基于的示例在这里：

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

因此，据我所知，可以通过调用onLoad方法简化第一个$（function（）），并可以通过使用document.getElementById（'demo-croppie'）简化$（'demo-croppie'）。

因此，该页面将导入croppie javascript文件

croppie.js
croppie.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函数，也无法理解如何将其与对象关联。

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

如果有人有更多建议，我也很乐意尝试其他任何将图像裁剪成正方形的图书馆

最佳答案

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

basic.bind({
    url: previewPictureSource
});

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

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

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