使用 Croppie - 简单示例

Posted

技术标签:

【中文标题】使用 Croppie - 简单示例【英文标题】：Using Croppie - Simple Example 【发布时间】：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吗？如果是这样，您的页面没有加载它。 进一步调查，这似乎是库本身的问题。我可以单独加载图像，但不能在带有 jQ​​uery 的框架中加载。 jsfiddle.net/Twisty/afb76b7f/3 和香草测试：jsfiddle.net/Twisty/afb76b7f/4 【参考方案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 的调用。

【讨论】：

以上是关于使用 Croppie - 简单示例的主要内容，如果未能解决你的问题，请参考以下文章

找不到模块：错误：无法解析“croppie”

如何使用Croppie防止过度缩放（JavaScript图像裁剪插件）

如何使用croppie js到php使用裁剪图像并使用它？

如何添加 Croppie 结果以上传 php 并将结果传递到其他 php 页面

Javascript || AWS S3 SDK &croppie 文件上传错误

html 使用croppie jquery-plugin。上传文件，它允许您在中心使用圆圈进行平移和缩放，然后当您单击“保存”时，将裁剪c