javascript - Javascript/jQuery 图像裁剪器不工作
问题描述
我一直在关注使用croppie.js 图像裁剪器的教程。我的所有代码都与教程中指定的完全相同,但是即使进行了调整,我也无法使其正常工作。
当用户单击“选择文件”输入并选择图像时,裁剪器应自动加载到模态对话框中,但是一旦选择了图像,则没有任何反应。
我试图让代码在 Safari 和 Chrome 中都能正常工作,但没有成功。感谢任何建议。
(也使用 Bootstrap v4.4.1)
图片裁剪器 src:https ://github.com/Foliotek/Croppie
代码:
<div class="contentWrap">
<div class="infoBox">
<div id="contentBox" class="aboutBox bubble">
<div class="container">
<br />
<h3 align="center">Test Cropper</h3>
<br />
<br />
<div class="panel panel-default">
<div class="panel-heading">Select Profile Image</div>
<div class="panel-body" align="center">
<input type="file" name="insert_image" id="insert_image" accept="image/*" />
<br />
<div id="store_image"></div>
</div>
</div>
</div>
</html>
<div id="insertimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Crop & Insert Image</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br/>
<button class="btn btn-success crop_image">Crop & Insert Image</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'square' //circle
},
boundary:{
width:300,
height:300
}
});
$('#insert_image').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#insertimageModal').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:'insert.php',
type:'POST',
data:{"image":response},
success:function(data){
$('#insertimageModal').modal('hide');
load_images();
alert(data);
}
})
});
});
load_images();
function load_images()
{
$.ajax({
url:"fetch_images.php",
success:function(data)
{
$('#store_image').html(data);
}
})
}
});
</script>
</div>
</div>
</div>
标题:
<!--Croppie image cropper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css" />
<!--jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
解决方案
由于您使用modal
的是 Bootstrap 库的功能,因此您只需在标头中添加 Bootstrap JavaScript 文件。
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
$(document).ready(function() {
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'square' //circle
},
boundary: {
width: 300,
height: 300
}
});
$('#insert_image').on('change', function() {
var reader = new FileReader();
reader.onload = function(event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function() {
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#insertimageModal').modal('show');
});
$('.crop_image').click(function(event) {
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response) {
$.ajax({
url: 'insert.php',
type: 'POST',
data: {
"image": response
},
success: function(data) {
$('#insertimageModal').modal('hide');
load_images();
alert(data);
}
})
});
});
load_images();
function load_images() {
$.ajax({
url: "fetch_images.php",
success: function(data) {
$('#store_image').html(data);
}
})
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>
<div class="contentWrap">
<div class="infoBox">
<div id="contentBox" class="aboutBox bubble">
<div class="container">
<br />
<h3 align="center">Test Cropper</h3>
<br />
<br />
<div class="panel panel-default">
<div class="panel-heading">Select Profile Image</div>
<div class="panel-body" align="center">
<input type="file" name="insert_image" id="insert_image" accept="image/*" />
<br />
<div id="store_image"></div>
</div>
</div>
</div>
<div id="insertimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Crop & Insert Image</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br/>
<button class="btn btn-success crop_image">Crop & Insert Image</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- c - 从 C 中具有非传统签名的函数返回二维数组
- c# - 在 azure 上使用 Angular 应用程序部署 Web API2.0
- android - 无法创建 ViewModel 类的实例 原因:java.lang.InstantiationException:java.lang.Class .ViewModel 没有零参数构造函数
- asp.net - 我的 ASP.NET / Visual Basic 代码有什么问题?
- ajax - 从 Storefront 迷你购物车的标题中删除文本“item/items”,启用 ajax
- openxml - 找不到openxml sdk生产力工具
- html - 在编译 ejs 时在 views\home.ejs 中的参数列表之后缺少 )
- azure - Azure 订阅别名的用途是什么?
- python - Python(数据窗格):如何将动态变量传递到数据窗格报告函数中
- git - 无法在服务器上拉取主分支