IE上的cropzoom js库问题

Question

我正在使用jquery库在左侧图像上进行裁剪，使用jquery ui在右侧图像上进行拖动和调整大小。

这是网址： http://hollywoodlacewigs.netsmartz.us/demo/

除了IE之外，它适用于所有浏览器。点击“上传”按钮的左侧位置上传图片。

<link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" /> 
<link href="css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>
<script type="text/javascript" src="js/script.js"></script> 
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="css/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="js/jquery.form.js"></script>    <!-- for ajax submit form-->
<script src="js/jquery.ui.touch-punch.js"></script> <!-- for touch devices-->
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />   
<script> 
// Upload image to resize into 173X205 and display in #output div
$(document).ready(function() { 
    $('#UploadForm').change('submit', function(e) {
        e.preventDefault();
        $('#SubmitButton').attr('disabled', ''); // disable upload button
        $('#left-pic').hide();
        $('#output').show();                    
        // show ajax loader till image resizes//
        $("#output").html('<img style="margin:45px 0px 0px 35px; " src="images/mixer/ajax-loader.gif" alt="Please Wait"/>');
        $(this).ajaxSubmit({
            target: '#output',
            success:  afterSuccess //call function after success
        });
    }); 
}); 
function afterSuccess(){ 
    $('#UploadForm').resetForm();  // reset form        
    $('#SubmitButton').removeAttr('disabled'); //enable submit button   
    // make image control buttons active ///
    $("#rt").attr('src','images/icons/rotate-counterclockwise.png');
    $("#lt").attr('src','images/icons/rotate-clockwise.png');
    $("#up").attr('src','images/icons/zoomin.png');
    $("#down").attr('src','images/icons/zoomout.png');
    $("#ninety").attr('src','images/icons/resize.png');
    $("#restore2").attr('src','images/icons/reset.png');
    $(".mix-face").attr('class','mix-face-active');

    // set img src to var and display in left img box with controls
    var imgsrc = $("#cropbox").attr('src');
    var cropzoom2 = $('#output').cropzoom({
            width:173,
            height:208,
            bgColor: '#FFF',
            enableRotation:true,
            enableZoom:true,
            zoomSteps:10,
            rotationSteps:5,
            expose:{
            slidersOrientation: 'horizontal',
            zoomElement: '#zoom',
            rotationElement: '#rot',
            elementMovement:'#movement'
        },
        // white square box to select image area//
        selector:{        
            centered:true,
            borderColor:'#FFF',
            borderColorHover:'#FFF'           
        },
        // image controls.. further controls can be defined or check cropzoom.js file for more controls..
        image:{
            source:imgsrc,
            width:173,
            height:208,
            minZoom:100,
            maxZoom:200,
            startZoom:100,
            useStartZoomAsMinZoom:true,
            snapToContainer:true
        }
    });
    // Restore image on left and right 
    $('#restore2').click(function(){
        cropzoom2.restore();
        $('#cutimage').remove();
        $('#composedimage').val('');
    });
    // crop button will crop the selected area of image and convert to vignette effect 
    $('#crop2').click(function(){ 
        cropzoom2.send('resize_and_crop.php','POST',{},function(rta){
            $('#cutimage').remove();
            var img = '<img width="85" height="95" src="'+rta+'" id="cutimage" style="top:55px;left:40px; border:2px solid #FFF;  position:absolute;"  />';
            $('#x3').val('40');
            $('#y3').val('55');
            $('#containment-wrapper').append(img);
            $('#composedimage').val(rta);
            CutAndResizeImg();
        });
    });
}
function CutAndResizeImg(){
    $(".btn_email_me_my_wig_pic").attr('class','btn_email_me_my_wig_pic-active');
    // image resizable on right image containment area.
    $('#cutimage').resizable({
        containment: $('#containment-wrapper'),
        stop: function(event, ui) {
            var w = $(this).width();
            var h = $(this).height();
            $('#w').val(w);
            $('#h').val(h);
            console.log('StopEvent fired')
            console.log('Width:'+w);
            console.log('Height:'+h)    
        }
    }),
    // image draggable on right image containment area.
    $('#cutimage').parent().draggable({
        containment: $('#containment-wrapper'),
        cursor: "move", 
        stop: function(){
            var finalOffset = $(this).offset();
            var parentFinalOffset = $(this).parent().offset();
            var finalxPos = finalOffset.left -(parentFinalOffset.left+2);
            var finalyPos = finalOffset.top- (parentFinalOffset.top+2);
            $('#x3').val(finalxPos);
            $('#y3').val(finalyPos);
        }
    });
    // show pop up window
    $('#click').click( function(){
        loadPopupBox();
    });
    // hide pop up window
    $('#popupBoxClose').click( function() {         
        unloadPopupBox();
    });
    // To Unload the Popupbox
    function unloadPopupBox() { 
        $('#popup_box').fadeOut("slow");
        $("#mixer-content").css({ 
            "opacity": "1"  
        }); 
        //window.location.reload();
    }   
    // To Load the Popupbox
    function loadPopupBox() {   
        $('#popup_box').fadeIn("slow");
        var winH = $(window).height();
        var winW = $(window).width();            
        $('#popup_box').css({
            'top' : ((winH / 2) - ($('#popup_box').height() / 2)) + 'px',
            'left' : ((winW / 2) - ($('#popup_box').width() / 2)) + 'px'
        });
        $('#mixer-content').css({
            'opacity':'.5'
        })
    }
}
    // test email validation or send email 
    function checkemail(email) {        
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)){
        $('#emailmsg').html('<div id="emailerror">Please enter valid email address.</div>');
            return false;
        } else {
            $('#processemail').submit('submit', function(e) {
                e.preventDefault();         
                $(this).ajaxSubmit({
                    //target: '#output2',
                    success:  emailsuccess              
                });             
            }); 
        }
    }
    // send thankyou message after successfull image sent as attachment to the assignee..
    function emailsuccess(){
        $('#processemail').resetForm();
        $('#processemail').hide();
        $('#msgheading').hide();
        $('#emailmsg').html('<div id="emailsuccess"><p>Email sent successfully!</p><p>&nbsp;</p><img src="images/icons/btn-thanku.png" id="closethank" /></div>');
        $("#closethank").click( function(){
            $('#popup_box').fadeOut("slow");        
            window.location.reload();           
        }); 
    }
</script>  
<div id="mixer-content">    
    <div class="pic-area">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <!-- Image control buttons -->
        <ul>
            <li><img id="rt" alt="Rotate Left" title="Rotate Left" src="images/icons/rotate-counterclockwise_d.png" width="41" height="35" /></li>
            <li><img id="lt" alt="Rotate Right" title="Rotate Right" src="images/icons/rotate-clockwise_d.png" width="41" height="35" /></li>
            <li><img id="up" alt="Zoom In" title="Zoom In" src="images/icons/zoomin_d.png" width="41" height="35"  /></li>
            <li><img id="down" alt="Zoom Out" title="Zoom Out" src="images/icons/zoomout_d.png" width="41" height="35" /></li>
            <li><img id="ninety" title="Rotate 90&deg;" alt="Rotate 90&deg;" src="images/icons/resize_d.png" width="41" height="35"  /></li>
            <li><img id="restore2" title="Reset Image" alt="Reset Image" src="images/icons/reset_d.png" width="41" height="35"  /></li>
        </ul>
        <!-- Left Default Image  -->
        <a class="left-pic" id="left-pic"><img  src="images/mixer/img_pic01.jpg" width="173" height="208" alt="" /></a>
        <!-- After uploading, image is displayed here resized.. -->
        <div id="output" style="float:left; width:173px; border:1px solid #9E999A; display:none; height:208px;"></div>
        <div class="icon-area"><a class="mix-face"  id="crop2"></a></div>
        <!-- cropped image is displayed over the below image for composition.-->
        <form name="finalForm" action="" method="post">     
            <div id="containment-wrapper" style="position:relative;">       
            <img src="images/mixer/1.jpg" width="173" height="208" alt="" style="position:absolute;"/>
            </div>
            <a class="btn_email_me_my_wig_pic" id="click"></a>
            <input type="submit" style="display:none;">     
        </form>
        <!--Upload form button-->
        <div id='uploadForm' style='float:left; margin-left:2px;'>
            <form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm">           
                <label class="filebutton">
                    <img src="images/mixer/btn_upload_your_pic.png" />
                    <span><input type="file" id="image" name="image"></span>
                </label>                
            </form>
        </div>  
        <!--Below are zoom and rotation controls which is hidden but we are using these values on button click events -->
        <div style="display:none;" id="zoom"></div> 
        <div style="display:none;" id="rot"></div> 
    </div>  
</div>
<!-- poup box displayed ..-->
<div id="popup_box">    
    <a id="popupBoxClose"><img src="images/mixer/close-button.png" /></a>
    <div id="msgheading">EMAIL ME MY WIG PICTURE</div>
    <div id="emailmsg"></div>
    <form name="processemail" id="processemail" action="processemail.php" method="post">
        <input type="hidden" name="composedimage" id="composedimage" >
        <input type="hidden" id="x3" name="x3" />
        <input type="hidden" id="y3" name="y3" />   
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <div style="margin:25px;">      
            Email : <input name="email" id="email" />
            <input id="emailsubmit" type="image" src="images/mixer/btn_send.png"  name="sendemail" onClick="return checkemail(document.getElementById('email').value)" />
        </div>  
    </form>     
</div>