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

Question

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

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 方法来简化，而 $('demo-croppie' ) 可以通过使用 document.getElementById ( 'demo-croppie' ) 来简化。

因此，该页面导入裁剪馅饼javascript文件

庄稼派.js 裁剪派.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

我在任何地方都找不到裁剪函数，也不了解如何将其与对象相关联。

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

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

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/