项目中用到了头像裁剪,我想到了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!
浙公网安备 33010602011771号