我正在使用Cropper.js在我的网站上裁剪照片.我已经按照readme页面中的所有步骤进行了操作,但是我得到了一些错误.我得到的第一个错误是未捕获的ReferenceError：没有定义Cropper.所以我添加了
var Cropper = window.Cropper statement.when我重新加载页面我得到另一个错误Uncaught 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>
解决方法:
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);
}
});
$(‘#image’)与document.getElementById(‘image’)基本相同,但它将图像元素作为jQuery对象返回,该对象上有许多有用的方法.像Cropper.js这样的许多插件都将自己的方法添加到jQuery对象中,以使它们易于使用.