Menu
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>
518
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.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
