使用 croppie 在没有 jquery 的情况下裁剪图像

Question

我正在尝试向我正在使用的网站添加图像裁剪器。我基于它的例子在这里：

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.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 函数，也不知道如何将它与对象相关联。

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

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

Answer 1

您不能在 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/

使用 croppie 在没有 jquery 的情况下裁剪图像

Using croppie to crop images without jquery

html

javascript

jquery

image

croppie