8

我正在尝试使用来自 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>

我希望有人能够帮助我让这个图像裁剪器工作:-)

谢谢 - 詹姆斯

4

2 回答 2

15

文档没有给你很好的例子。我发现了这个：Jquery plugin Croppie to crop image Error

这帮助我弄清楚了一些事情。

工作示例：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需要有一些widthand height，否则它会渲染得太小而看不到视口。此外，如果您删除points: [77, 469, 280, 739]，它将在div.

于 2017-01-12T22:52:53.383 回答
2

您只是忘记使用插件中提到的 jquery 库。在您的 html 的 head 部分中，只需添加对 jquery 的调用。

于 2019-01-30T15:34:10.963 回答