Javascript/jQuery图像裁剪器不工作

我一直在学习使用cropie.js图像裁剪器的教程。我的所有代码都与教程中指定的代码完全相同，但是即使进行了调整，我也无法使其正常工作

当用户单击“选择文件”输入并选择图像时，裁剪器应自动加载到模式对话框中，但是一旦选择了图像，则不会发生任何事情

我试图让代码在Safari和Chrome中都能工作，但没有成功。谢谢你的建议

（也使用引导v4.4.1）

图像裁剪器src：

代码：

试种机




选择配置文件图像


&时代；
裁剪和插入图像






裁剪和插入图像
接近
$（文档）.ready（函数（）{
$image_-crop=$（“#image_-demo”）.cropie({
enableExif:true，
视口：{
宽度：200，
身高：200，
类型：'square'//圆形
},
边界：{
宽度：300，
身高：300
}    
});
$（'#insert_image'）。在（'change'，function（）上{
var reader=new FileReader（）；
reader.onload=函数（事件）{
$image\u crop.cropie（'bind'{
url:event.target.result
}).然后（函数（）{
log（'jQuery bind complete'）；
});
}
reader.readAsDataURL（this.files[0]）；
$（'#insertimageModal'）.modal（'show'）；
});
$（'.crop_image'）。单击（函数（事件）{
$image\u crop.cropie（'result'{
键入：“画布”，
大小：“视口”
}).然后（功能（响应）{
$.ajax({
url:'insert.php'，
类型：'POST'，
数据：{“图像”：响应}，
成功：功能（数据）{
$（'#insertimageModal'）.modal（'hide'）；
加载_图像（）；
警报（数据）；
}
})
});
});
加载_图像（）；
函数load_images（）
{
$.ajax({
url:“fetch_images.php”，
成功：功能（数据）
{
$（'#store_image'）.html（数据）；
}
})
}
});  

标题：

<!--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

函数，所以只需在头文件中添加引导JavaScript文件即可

$（文档）.ready（函数（）{
$image_-crop=$（“#image_-demo”）.cropie({
enableExif:true，
视口：{
宽度：200，
身高：200，
键入：“正方形”//圆形
},
边界：{
宽度：300，
身高：300
}
});
$（'#insert_image'）。在（'change'，function（）上{
var reader=new FileReader（）；
reader.onload=函数（事件）{
$image\u crop.cropie（'bind'{
url:event.target.result
}).然后（函数（）{
log（'jQuery bind complete'）；
});
}
reader.readAsDataURL（this.files[0]）；
$（'#insertimageModal'）.modal（'show'）；
});
$（'.crop_image'）。单击（函数（事件）{
$image\u crop.cropie（'result'{
键入：“画布”，
大小：“视口”
}).然后（功能（响应）{
$.ajax({
url:'insert.php'，
键入：“POST”，
数据：{
“图像”：响应
},
成功：功能（数据）{
$（'#insertimageModal'）.modal（'hide'）；
加载_图像（）；
警报（数据）；
}
})
});
});
加载_图像（）；
函数load_images（）{
$.ajax({
url:“fetch_images.php”，
成功：功能（数据）{
$（'#store_image'）.html（数据）；
}
})
}
});



试种机




选择配置文件图像


&时代；
裁剪和插入图像






裁剪和插入图像
接近
由于您使用的是引导库的
modal
函数，所以只需在头文件中添加引导JavaScript文件即可



$（文档）.ready（函数（）{
$image_-crop=$（“#image_-demo”）.cropie({
enableExif:true，
视口：{
宽度：200，
身高：200，
键入：“正方形”//圆形
},
边界：{
宽度：300，
身高：300
}
});
$（'#insert_image'）。在（'change'，function（）上{
var reader=new FileReader（）；
reader.onload=函数（事件）{
$image\u crop.cropie（'bind'{
url:event.target.result
}).然后（函数（）{
log（'jQuery bind complete'）；
});
}
reader.readAsDataURL（this.files[0]）；
$（'#insertimageModal'）.modal（'show'）；
});
$（'.crop_image'）。单击（函数（事件）{
$image\u crop.cropie（'result'{
键入：“画布”，
大小：“视口”
}).然后（功能（响应）{
$.ajax({
url:'insert.php'，
键入：“POST”，
数据：{
“图像”：响应
},
成功：功能（数据）{
$（'#insertimageModal'）.modal（'hide'）；
加载_图像（）；
警报（数据）；
}
})
});
});
加载_图像（）；
函数load_images（）{
$.ajax({
url:“fetch_images.php”，
成功：功能（数据）{
$（'#store_image'）.html（数据）；
}
})
}
});



试种机




选择配置文件图像


&时代；
裁剪和插入图像






克罗
<!--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">