Question

我正在尝试将图片裁剪器添加到我正在处理的网站上。我基于它的例子是：

JS小组声称它是普通的javascript，但它也使用JQuery（如果我没有错，根本不熟悉它）。我试图删除它，以尽可能地保持网站易于维护，但我收到了错误。

HTML：

<%= link_to(...) do %>
  <li class="nav-item">
    <a class="nav-link" href="index.html">
      <i class="batch-icon batch-icon-browser-alt"></i>
      Dashboard 
    </a>
  </li>
<% end %>

CSS：

<div id="page">
    <div id="demo-basic">
    </div>
</div>

JS

#page
{
    background: #FFF;
    padding: 20px;
    margin: 20px;
}

#demo-basic {
  width: 200px;
  height: 300px;
}

因此，根据我的理解，可以通过调用onLoad方法简化第一个$（function（）），并使用document.getElementById（'demo-croppie'）简化$（'demo-croppie'））

因此，该页面导入了croppie javascript文件

croppie.js croppie.min.js

并试图像这样简化脚本（页面主体的onLoad事件）

$(function() {
    var basic = $('#demo-basic').croppie ( {
        viewport: {
            width: 150,
            height: 150
        }
    });
    basic.croppie('bind', {
        url: 'https://i.imgur.com/xD9rzSt.jpg',
      });
});

但是我收到了一个引用错误：

var basic = document.getElementById('demo-basic').croppie({
    viewport: {    
        width: 150,
        height: 150
    }
});

basic.croppie('bind', {
    url: previewPictureSource,
});

我无法在任何地方找到croppie函数，或者了解如何将其与对象关联。

这个问题有明显的解决方案吗？

我也很乐意尝试任何其他图书馆，如果有人提出更多建议，可以用正方形图像裁剪图像

Answer 1

您无法在basic上调用.croppie（），因为您使用VanillaJS对其进行了初始化。但是，您可以直接在其上调用.bind（）：

basic.bind({                                                                 
    url: previewPictureSource
});

文档指定您可以通过以下两种方式与Croppie对象进行交互：

// with jQuery
$('#item').croppie(method, args);
// with VanillaJS
croppieObject.method(args);

在此处查看文档：{{3}}

使用croppie裁剪图像而不使用jquery

1 个答案: