我正在尝试使用图像裁剪器，Foliotek 的 Croppie，但由于某种原因它对我不起作用 - 我正在使用一个非常简单的例子。
我正在使用以下页面中的演示示例：http://foliotek.github.io/Croppie/
但我得到的只是浏览器中的空白页面 - IE和Chrome。
我的HTML代码如下：
<html>
<head>
<link href="croppie.css" rel="Stylesheet" />
<script src="croppie.js"></script>
</head>
<body>
<div id="demo-basic"></div>
<script>
var basic = $('#demo-basic').croppie({
viewport: {
width: 150,
height: 200
}
});
basic.croppie('bind', {
url: 'cat.jpg',
points: [77, 469, 280, 739]
});
</script>
</body>
</html>
我希望有人能够帮助我让这个图像裁剪器工作：-）
谢谢 - 詹姆斯
文档没有给你很好的例子。我发现这个： Jquery 插件裁剪图像错误
这帮助我弄清楚了一些事情。
工作示例：https://jsfiddle.net/Twisty/afb76b7f/8/
.HTML
<div id="page">
<div id="demo-basic">
</div>
</div>
.CSS
#page {
background: #FFF;
padding: 20px;
margin: 20px;
}
#demo-basic {
width: 200px;
height: 300px;
}
jQuery
$(function() {
var basic = $('#demo-basic').croppie({
viewport: {
width: 150,
height: 200
}
});
basic.croppie('bind', {
url: 'https://i.imgur.com/xD9rzSt.jpg',
points: [77, 469, 280, 739]
});
});
所以你的div需要有一些width和height，否则它会渲染得太小而看不到视口。另外，如果您删除points: [77, 469, 280, 739]，它将在div中加载完整的图像。
你只是忘记使用插件中提到的jquery库。在 html 的 head 部分，只需添加对 jquery 的调用。