Форумы портала PHP.SU :: проблема с crop в Safari

Есть код:
CODE (htmlphp):
скопировать код в буфер обмена
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="/css/style_avatar.css">
        <link rel="stylesheet" type="text/css" href="/css/imgareaselect-deprecated.css">
        <script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="/js/ajaxupload.js"></script>
        <script type="text/javascript" src="/js/jquery.imgareaselect.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
                var button = $('#butUpload > span'), interval, image, widthImg, heightImg, thumbW, thumbH;
                
                new AjaxUpload(button, {
                        action: 'upload.php', 
                        onSubmit : function(file, ext){
                        if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)) {
                                button.text('Загружается');
                                this.disable();
                                $("#imgLoad").show();
                                
                                interval = window.setInterval(function(){
                                        var text = button.text();
                                        
                                        if (text.length < 13){
                                                button.text(text + '.');                                        
                                        } else {
                                                button.text('Загружается');                             
                                        }
                                }, 200);
                                } else {
                                        alert("Ошибка, только jpg, png, jpeg, gif");
                                        return false;
                                }
                        },
                        onComplete: function(file, response){
                                $("#imgLoad").hide();
                                button.text('Выбрать другое');
                                
                                window.clearInterval(interval);
                                
                                image = file;           
                                var ajaxObj = JSON.parse(response);
                                //var ajaxObj = JSON.parse(response);
                                widthImg = ajaxObj.width;
                                heightImg = ajaxObj.height;
                                thumbW = ajaxObj.thumbW;
                                thumbH = ajaxObj.thumbH;
                                
                                $("#preview").css({'width': thumbW+'px', 'height': thumbH+'px'});
                                $("#min_thumbnail").css({'width': thumbW+'px', 'height': thumbH+'px'});
                                
                                this.enable();
                                
                                view(file);                                             
                        }
                });
                
                function view (imgName) {
                
                        $("#imgEdit").show();
                        
                        $("#thumbnail").attr("src","http://site.com/uploads/"+imgName);
                        $("#min_thumbnail").attr("src","http://site.com/uploads/"+imgName);
                }
                
                $("#thumbnail").imgAreaSelect({aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview});
                
                function preview (img, selection) {
                        if (!selection.width || !selection.height)
                                return;
                                
                        var scaleX = thumbW / selection.width;
                        var scaleY = thumbH / selection.height;
                        
                        $("#min_thumbnail").css({
                                width: Math.round(scaleX * widthImg),
                                height: Math.round(scaleY * heightImg),
                                marginLeft: -Math.round(scaleX * selection.x1),
                                marginTop: -Math.round(scaleY * selection.y1)
                        });
                        
                        $("#x1").val(selection.x1);
                        $("#y1").val(selection.y1);
                        $("#x2").val(selection.x2);
                        $("#y2").val(selection.y2);
                        $("#w").val(selection.width);
                        $("#h").val(selection.height);
                        
                }
                
                $("#butSave").click(function () {
                
                        var x1 = $("#x1").val();
                        var y1 = $("#y1").val();
                        var x2 = $("#x2").val();
                        var y2 = $("#y2").val();
                        var w = $("#w").val();
                        var h = $("#w").val();
                        $.ajax ({
                                url: "upload.php",
                                type: "POST",
                                data: {image: image, x1: x1, y1: y1, x2: x2, y2: y2, w: w, h: h},
                                success: function () {newAvatar(image);}
                        
                        });
                
                        function newAvatar (avatar) {
                                $("#thumbnail").imgAreaSelect({hide: true});
                                $("#avatar").html("<img src=\"http://site.com/uploads/"+avatar+"\" width=\"200\">");
                                $("#minImg").html("<img src=\"http://site.com/uploads/min_"+avatar+"\">");
                                $("#imgEdit").hide();
               
                        }
                
                });
                
        });
        </script>
        </head>
        <body>    
<div id="main">
      <div id="wrapper">
    <div id="content">
          <div id="avatar2"></div>
          <div id="minImg"></div>
          <div style="clear:both"></div>
                    <div id="butUpload"><span>Выберите фото</span><img src="/img/loading.gif" id="imgLoad" 
 
align="right" /></div>
          <div id="imgEdit"> <img src="" style="float: left; margin-right: 10px;" id="thumbnail" />
        <div id="preview" style="width: 100px; height: 100px; overflow: hidden;"> <img src="" style="width: 100px; height: 100px;" id="min_thumbnail" /> </div>
        <br style="clear:both;"/>
        <form name="thumbnail">
              <input type="hidden" name="x1" value="" id="x1" />
              <input type="hidden" name="y1" value="" id="y1" />
              <input type="hidden" name="x2" value="" id="x2" />
              <input type="hidden" name="y2" value="" id="y2" />
              <input type="hidden" name="w" value="" id="w" />
              <input type="hidden" name="h" value="" id="h" />
            </form>
            <div style="clear:both"></div>
        <div id="butSave">Сохранить</div>
      </div>
        </div>
    <!--end content--> 
  </div>
      <!--end wrapper--> 
      
    </div>
    <!--end main-->
 
 
</body>
</html>
 
(Отредактировано автором: 15 Февраля, 2011 - 14:49:48)