imgareaselect 图片裁剪导致IE浏览器挂掉的问题

最新推荐文章于 2021-03-23 10:42:02 发布

原创最新推荐文章于 2021-03-23 10:42:02 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #ie #function #stylesheet #image #div

本文介绍了在使用imgareaselect过程中遇到的IE浏览器崩溃问题，通过将图片存储到临时div并将其html加到目标div中，成功解决了此问题。详细步骤包括使用jQuery实现图片加载和裁剪功能。

在使用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>