Question

我试图使用图片裁剪器，来自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>

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

谢谢 - 詹姆斯

Answer 1

文档没有给你很好的例子。我发现了这个：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需要有一些width和height，否则它会变得太小而无法看到视口。此外，如果您移除points: [77, 469, 280, 739]，则会在div中加载图片。

希望有所帮助。

Answer 2

您只是忘记使用插件中提到的jquery librarie。在HTML的头部，只需将调用添加到jquery。

使用Croppie - 简单示例

2 个答案: