javascript - 如何初始化 fengyuanchen jQuery 裁剪插件？

Question

在我的网络应用程序中，我试图实现个人资料图片上传，它允许您在上传图像后裁剪图像。为此，我使用此处的 jQuery 裁剪插件: http://fengyuanchen.github.io/cropper/

问题是，我无法让它初始化!在文档中，它指出:

Initialize with $.fn.cropper method.

我不确定这意味着什么，但我知道这很重要，因为使用我当前的代码:

$('#profile-image').cropper({
  aspectRatio: 1 / 1,
  crop: function(e) {
    // Output the result data for cropping image.
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
  }
});

我收到错误消息:

TypeError: $(...).cropper is not a function

感谢任何帮助!我知道我很可能缺少对 JS 和 jQuery 的一些基本理解。

Answer 1

仔细检查您的脚本顺序。从 github 的文档中可以看出

安装

包含文件:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

所以第一个想法是，在您的代码中，在 jQuery 之前包含 cropper ，或者在 jQuery 之前调用 cropper 的脚本在 cropper脚本