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

Question

在我的网络应用程序中，我正在尝试实现一个个人资料图片上传功能，该功能允许您在上传后剪裁图像。为此，我使用了jQuery cropper插件，可以在此处找到：http://fengyuanchen.github.io/cropper/ 问题是，我只是无法初始化！文档中说明：

用$.fn.cropper方法进行初始化。

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

$('#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不是一个函数

希望能得到帮助！我知道我很可能缺少一些JS和jQuery的基本理解。

- Elliott Rhys

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>

第一种可能是你的代码中先引入了cropper而后才引入了jQuery，或者在调用cropper脚本之前就已经执行（引入）了它。

- MysterX

---

谢谢您的回答，但我已经确保在jquery之后包含了cropper！编辑：等一下。我执行裁剪器函数的脚本是在裁剪器脚本之前包含的！我太傻了！ - Elliott Rhys