初始化时出错 cropper.js

Question

我正在使用 Cropper.js to crop photos on my website.i have followed all the steps in the readme 页面，但我得到一些 error.the 我得到的第一个错误是 Uncaught ReferenceError: Cropper is not defined。所以我添加了 var Cropper = window.Cropper statement.when 我重新加载页面我又遇到了另一个错误 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>

Answer 1

Cropper (not to be confused with 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') 几乎相同，但它 returns 图像元素作为 jQuery 对象其中有很多有用的方法。许多插件如 Cropper.js 将它们自己的方法添加到 jQuery 对象以使其易于使用。

初始化时出错 cropper.js

Error while initializing cropper.js

javascript

jquery

image

crop