codegeek codegeek - 6 months ago 257
Javascript Question

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>

Answer

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.