使用Croppie - 简单示例

我正在尝试使用来自Foliotek的图像裁剪器Croppie,但出于某种原因它不适合我 - 而且我使用的是一个非常简单的例子.

我正在使用以下页面中的演示示例:http://foliotek.github.io/Croppie/

但我得到的只是我浏览器中的空白页面 - IE和Chrome.

我的HTML代码如下:

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

谢谢 - 詹姆斯

文档没有给你很好的例子.我发现了这个:Jquery插件Croppie裁剪图像错误

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

工作示例:https://jsfiddle.net/Twisty/afb76b7f/8/

HTML

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.

希望有所帮助.