使用Croppie - 简单示例

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插件Croppie裁剪图像错误

这帮我搞清楚了一些事情.

工作示例: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.

希望有所帮助.