在使用imgareaselect过程中,如果加载图片是使用img.load的方式,在load方法中使用append(this)方式将图片加载进dom中的,则在调用imgareaselect方法时,在IE浏览器里会出现浏览器挂掉的现象,我的一个解决办法就是:使用了一个临时div来存储图片,而后把这个div的html加进需要的div层里。
<!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" />
<title>图片裁剪功能</title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<style>
* {
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.js"></script>
<script type="text/javascript">
jQuery(function($){
var path = "image/019c1e8df0f53ac10e244408.jpg";
var image = new Image();
$(image).load(function(){
$('#temp').append(this);
$('#img').append("<input id='needAreaSelect' type='button' value='裁剪图片' style='width:100px;' /><br />");
$('#img').append($('#temp').html());
$('#needAreaSelect').click(function(){
$('img').imgAreaSelect({});
});
})
.error(function() {
})
.attr('src', path);
});
</script>
</head>
<body>
<div id="img"></div>
<div id="temp"></div>
</body>
</html>