Question

我正在使用Cropper.js在我的网站上裁剪照片。我已按照readme页面中的所有步骤操作，但我收到了一些错误。我收到的第一个错误是未捕获ReferenceError：未定义Cropper 。所以我添加了 var Cropper = window.Cropper 语句。当我重新加载页面时，我收到另一个错误未捕获的TypeError：Cropper不是构造函数。但这样只有他们传递选项到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（不要与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);
    }
  });

$（＆＃39; #image＆＃39;）与document.getElementById（＆＃39; image＆＃39;）几乎相同，但它将图像元素作为jQuery对象返回，它有很多有用的方法。像Cropper.js这样的许多插件都将自己的方法添加到jQuery对象中，以使它们易于使用。

初始化cropper.js时出错

1 个答案: