Error while initializing cropper.js

javascript jquery image crop

12,326

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.

12,326

Author by

yasarui

Updated on July 01, 2022

Comments

yasarui almost 2 years

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>

yasarui almost 8 years

Hi @peter ,i run the code like the above suggestion.but i got the error Cannot read property 'x' of undefined
Peter Haight almost 8 years

Whoops. Sorry about that. You just need to take the .detail parts out. I edited my answer.
Alejandro García Iglesias almost 7 years

Actually, Cropper.js is not meant to work with jQuery, but it's sibling project Cropper does. I suggest, in order to avoid keep spreading confusion, that you remove .js and add a warning that they're 2 separate sibling projects that actually achieve the same results, and that the OP was using the Cropper.js syntax while he wanted to use the Cropper jQuery plugin one.
Peter Haight almost 7 years

I didn't even notice there was that other non-jquery Clipper. I updated my answer to differentiate between the two. Thanks!