使用croppie在不使用jquery的情况下裁剪图像
使用croppie在不使用jquery的情况下裁剪图像
提问于 2018-05-06 16:43:59
我试图添加一个图像裁剪到我正在工作的网站。我所依据的例子是：
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’)可以通过使用document.getElementById (‘demo’)进行简化。
因此，该页面导入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我在任何地方都找不到它的函数，也不知道如何将它与一个对象相关联。
这个问题有明显的解决办法吗？
如果有人有更多建议的话，我也很乐意尝试任何其他的图书馆，如果有人有更多的建议的话，可以用正方形的图像来绘制图像。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-31 22:11:51
您不能在.croppie()上调用basic，因为您使用VanillaJS初始化了它。但是，您可以在它上直接调用.bind()：
basic.bind({
url: previewPictureSource
});文档指定可以通过以下两种方式与Croppie对象交互：
// with jQuery
$('#item').croppie(method, args);
// with VanillaJS
croppieObject.method(args);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50202142
复制相关文章
相似问题
腾讯云开发者
