我正在尝试在我的隐藏模式事件块上销毁隐藏模式事件上的croppie实例,我的所有操作都运行良好,除了销毁croppie实例函数这是我的代码:
function Updatetweetmedia(){
var id = document.getElementById('updatetwtID').value ;
$('.overlayUpdateTwtMeda').css({
'opacity':'1',
'visibility':'visible'
})
var el = document.getElementById('updtViewPort');
var resize = new Croppie(el, {
viewport: {
width: 350,
height: 350,
type: 'square'
},
boundary: {
width: '100%',
height: 300
},
showZoomer: true,
enableOrientation: true
});
var reader = new FileReader();
reader.onload = function(e) {
resize.bind({
url: e.target.result,
orientation: 1
});
}
reader.readAsDataURL(document.getElementById('updattwtmedia').files[0]);
document.getElementById('updatmediacropbtn').addEventListener('click',function(){
$('.overlayUpdateTwtMeda').css({
'opacity':'0',
'visibility:':'hidden'
})
$('.overlayUpdateTwtMeda222').css({
'opacity':'1',
'visibility':'visible'
})
resize.result({
type: 'canvas',
size: {
width: '500',
height: '350'
},
quality: 1,
format: 'jpeg'
}).then(function(img) {
var image = ' <img id="updateimgpreview" src="'+img+'" alt="" srcset="" width="500" height="350">';
$('.updtetwtpreview').append(image);
})
})
document.getElementById('UpdateTweetModal').addEventListener('hidden.bs.modal',function(){
// document.getElementById('updtViewPort').innerHTML = '';
// $('#updtViewPort').html('');
// $('#updattwtmedia').val('');
// $('.overlayUpdateTwtMeda').css({
// 'opacity':'0',
// 'visibility':'hidden'
// })
// $('.overlayUpdateTwtMeda222').css({
// 'opacity':'0',
// 'visibility':'hidden'
// })
$('#updtViewPort').croppie('destroy');
}) }//end of Updatetweetmedia function
我所有的覆盖 div 和我的模态一样工作得很好,但是据我所知,当croppie 初始化时它会添加croppie-container 类和一些子节点,我试图删除这些节点并重置我的值输入文件,但是当试图重新初始化它时抛出croppie.js:1543 Uncaught Error: Croppie: Can't initializecroppie more than once 我真的很感激这里的任何帮助,并提前感谢