初始化cropper.js时出错
初始化cropper.js时出错
提问于 2016-05-27 03:53:41
我正在使用Cropper.js在我的网站上裁剪照片。我已经遵循了自述文件页面中的所有步骤，但我得到的一些error.the第一个错误是Uncaught ReferenceError: Cropper是未定义的.so，我添加了var Cropper = window.Cropper statement.when，我重新加载了该页面，我得到了另一个错误Uncaught TypeError: Cropper不是构造函数.but，只是他们把选项传递给了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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-27 04:45:10
克罗珀 (不要与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对象中，以使其易于使用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37474562
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号