Error while initializing cropper.js

i am using Cropper.js to crop photos on my website.i have followed all the steps in the readme page,but i am getting some error.the first error i got is Uncaught ReferenceError: Cropper is not defined.so i have added the var Cropper = window.Cropper statement.when i reload the page i got another error Uncaught TypeError: Cropper is not a constructor.but in this way only they are passing the options to Cropper constructor,couldn't figure it out what is going wrong

<!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>

Solution

Cropper (not to be confused with Cropper.js) is meant to work with jQuery, so you need to use it through a jQuery object like this:

  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);
    }
  });

The $('#image') is pretty much the same thing as document.getElementById('image') but it returns the image element as a jQuery object which has a lot of useful methods on it. Many plugins like Cropper.js add their own methods to the jQuery object to make them easy to use.