首页 > 解决方案 > $('#demo').croppie('destroy') ; 销毁croppie实例croppie.js失败

问题描述

我正在尝试在我的隐藏模式事件块上销毁隐藏模式事件上的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 我真的很感激这里的任何帮助,并提前感谢

标签: javascriptjquerycroppie

解决方案


推荐阅读