初始化cropper.js 时出错答案

【问题标题】：Error while initializing cropper.js初始化cropper.js 时出错
【发布时间】：2016-09-25 06:24:34
【问题描述】：

我正在使用Cropper.js 在我的网站上裁剪照片。我已按照readme 页面中的所有步骤操作，但我遇到了一些错误。我遇到的第一个错误是 Uncaught ReferenceError: Cropper is未定义。所以我添加了 var Cropper = window.Cropper 语句。当我重新加载页面时，我得到另一个错误 Uncaught TypeError: Cropper is not a constructor。但是只有他们通过这种方式传递选项Cropper 构造函数，无法弄清楚出了什么问题

<!doctype html>
<html lang="en">
<head>
  <title>Cropper</title>
  <link rel="stylesheet" href="../dist/cropper.css">
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>

  <div>
    <img id="image" src="wallpaper.jpg">
  </div>

  <div id="preview" ></div>

  <!-- Scripts -->
  <script src="../assets/js/jquery.min.js"></script>
  <script src="../dist/cropper.js"></script>
  <script>
      var Cropper = window.Cropper;
      var image = document.getElementById('image');
      var cropper = new Cropper(image, {
        aspectRatio: 16 / 9,
        crop: function(e) {
          console.log(e.detail.x);
          console.log(e.detail.y);
          console.log(e.detail.width);
          console.log(e.detail.height);
          console.log(e.detail.rotate);
          console.log(e.detail.scaleX);
          console.log(e.detail.scaleY);
        }
      });
  </script>
</body>
</html>

【问题讨论】：

听起来你还没有包含cropper.js 文件。您确定该文件确实位于../dist/cropper.js？似乎很可能不是
在您提供给 Cropper 示例的链接中，我也没有看到任何全局 Cropper 对象，因此您的方法也会在那里失败。我建议您仔细阅读文档。
在他们要求初始化裁剪器的页面上，如 Window.cropper

标签： javascript jquery image crop

【解决方案1】：

Cropper（不要与Cropper.js 混淆）旨在与 jQuery 一起使用，因此您需要通过这样的 jQuery 对象来使用它：

  var image = $('#image');
  var cropper = image.cropper({
    aspectRatio: 16 / 9,
    crop: function(e) {
      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);
    }
  });

$('#image') 与 document.getElementById('image') 几乎相同，但它以 jQuery 对象的形式返回图像元素，其中包含许多有用的方法。许多像 Cropper.js 这样的插件都将自己的方法添加到 jQuery 对象中以使其易于使用。

【讨论】：

嗨@peter，我按照上面的建议运行代码。但我收到错误无法读取未定义的属性'x'
哎呀。对于那个很抱歉。您只需要取出 .detail 部分。我编辑了我的答案。
实际上，Cropper.js 并不适合与 jQuery 一起使用，但它是 Cropper 的兄弟项目。我建议，为了避免继续传播混乱，你删除 .js 并添加一个警告，它们是 2 个独立的兄弟项目，实际上实现了相同的结果，并且 OP 在他想要的时候使用 Cropper.js 语法使用 Cropper jQuery 插件之一。
我什至没有注意到还有其他非 jquery Clipper。我更新了我的答案以区分两者。谢谢！