oneIceHeart
小小程序员,漫漫程序路

导航

 

项目中用到了头像裁剪,我想到了jcrop,ajaxUpload后jcrop,部署完毕,以为完美收工,没想到IE下出现问题,jcrop无法加载

代码:

                $('#show').html("<img src='' id='target' />");
                $('#target,#preview,#preview1,#preview2').attr('src',
                        response + '?' + Math.random());
                $('#target').Jcrop({ // #target 内图片、裁剪框初始化
                    minSize : [ 36, 36 ], // 裁剪框最小宽高 48,48
                    setSelect : [ 0, 0, 100, 100 ], // 初始化裁剪框起点 0,0 大小 100,100
                    onChange : updatePreview, // 裁剪框:拖动事件
                    onSelect : updateCoords, // 裁剪框:拖动停止事件
                    aspectRatio : 1
                // 长宽比 1 正方形 其他值长方形
                }, function() {
                    // Use the API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0]; // 原始图 宽度
                    boundy = bounds[1]; // 原始图 高度
                    // $('.NewWindow').css({"height":(boundy+150)+'px'});
                    // Store the API in the jcrop_api variable
                    jcrop_api = this; // 对象赋值
}

在困惑了一天后,终于在stackoverflow上找到相似问题,找到问题原因,IE的IMG对象的src属性必须指定好,直接html方法写入,使用jquery的attr方法IE无法识别

修改后:

 1                 $('#show').html("<img src='"+response + "?" + Math.random()+"' id='target' />");
 2                 $('#preview,#preview1,#preview2').attr('src',
 3                         response + '?' + Math.random());
 4                 $('#target').Jcrop({ // #target 内图片、裁剪框初始化
 5                     minSize : [ 36, 36 ], // 裁剪框最小宽高 36,36
 6                     setSelect : [ 0, 0, 100, 100 ], // 初始化裁剪框起点 0,0 大小 100,100
 7                     onChange : updatePreview, // 裁剪框:拖动事件
 8                     onSelect : updateCoords, // 裁剪框:拖动停止事件
 9                     aspectRatio : 1
10                 // 长宽比 1 正方形 其他值长方形
11                 }, function() {
12                     // Use the API to get the real image size
13                     var bounds = this.getBounds();
14                     boundx = bounds[0]; // 原始图 宽度
15                     boundy = bounds[1]; // 原始图 高度
17                     // Store the API in the jcrop_api variable
18                     jcrop_api = this; // 对象赋值
19                 }            

按照这个思路,使用appendTo也是可以的

壮哉我大IE!

posted on 2013-11-14 09:35  oneIceHeart  阅读(383)  评论(0)    收藏  举报