使用 Croppie - 简单示例答案

【问题标题】：Using Croppie - Simple Example使用 Croppie - 简单示例
【发布时间】：2017-05-28 02:29:52
【问题描述】：

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

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

谢谢 - 詹姆斯

【问题讨论】：

欢迎来到 Stack Overflow。您在控制台中看到了哪些错误？你需要jQuery吗？如果是这样，您的页面没有加载它。
进一步调查，这似乎是库本身的问题。我可以单独加载图像，但不能在带有 jQuery 的框架中加载。 jsfiddle.net/Twisty/afb76b7f/3 和香草测试：jsfiddle.net/Twisty/afb76b7f/4

标签： javascript jquery image cropper

【解决方案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 中加载完整的图像。

【讨论】：

但是我们如何使用来旋转图像呢？
@NarendraVerma 这个问题不包括旋转能力，这个库也不包括。
是的，没错，但你知道怎么做吗？
@NarendraVerma 它可以通过多种方式和多种插件来完成。你试过什么？
当我在本地主机上运行它时，它给出了 CORS 错误。可能是什么原因和解决方法？

【解决方案2】：

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

【讨论】：