gpt4 book ai didi

javascript - 初始化 cropper.js 时出错

转载 作者:数据小太阳 更新时间:2023-10-29 05:09:39 24 4
gpt4 key购买 nike

我正在使用 Cropper.js在我的网站上裁剪照片。我已按照 readme 中的所有步骤进行操作页面,但我遇到了一些错误。我得到的第一个错误是Uncaught ReferenceError: Cropper is not defined。所以我添加了var Cropper = window.Cropper 语句。当我重新加载页面时,我得到了另一个错误Uncaught TypeError: Cropper is not a constructor。但只有通过这种方式他们才能传递选项到 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 对象中以使其易于使用。

关于javascript - 初始化 cropper.js 时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37474562/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com