JCrop的IE问题

Question

我在我的aspx页面中使用了jcrop：

<script type="text/javascript" src="../../Scripts/js/jquery.Jcrop.min.js"></script>
<link rel="Stylesheet" href="../../Scripts/css/jquery.Jcrop.min.css" />

下面是我的JCrop声明：

 <script type="text/javascript">
    $(document).ready(function () {
        $('#' + options.ImageID).Jcrop({
            onChange: function (coords) {
                $('#' + options.HiddenID).val(coords.x + ',' + coords.y + ',' + coords.w + ',' + coords.h);
            },
            aspectRatio: 1
        });
    });
</script>

这是我的.NET镜像：

<asp:Image runat="server" ID="PhotoPreviewImage" />

options变量是在后台代码中创建的对象，用于将PhotoPreviewImage的ClientID传递给JS。

这在Chrome上运行得很好，但在IE9上就不行了(我甚至连十字准线都没有)。

我使用的是jquery.Jcrop.min.js v0.9.10 (内部版本:20120429)和jQuery v1.7.1 jquery.com

如何在IE中实现此功能？

Answer 1

我过去在IE中使用JCrop时遇到了一些问题。我通过向options对象添加"onSelect“和"onRelease”事件解决了这个问题。我不知道这对你的情况是否有帮助，但值得一试。我的代码看起来像这样：

.Net

<asp:Image ID="cropbox" runat="server" ImageUrl="Assets/images/blank.gif" />

Javascript：

<script>
$(document).ready(function () {
    var api = $.Jcrop('#cropbox', {
        aspectRatio: 1,
        onSelect: update,
        onChange: update,
        onRelease: update
    });
});

function update(c) {
    //Store coords here
}
</script>

Answer 2

我最终不得不检测IE并使用两种格式之一进行初始化：

        var is_msie = /msie/.test(navigator.userAgent.toLowerCase());
        var jcrop_obj;

        if (is_msie) {
            jcrop_obj = jQuery.Jcrop('#img', {
                onSelect: jcrop_onEndCrop,
                minSize: [ 20, 20 ],
                setSelect: [ x, y, x2, y2 ],
                allowSelect: false
            });
        }
        else {
            jQuery('#img').Jcrop({
                onSelect: jcrop_onEndCrop,
                minSize: [ 20, 20 ],
                setSelect: [ x, y, x2, y2 ],
                allowSelect: false
            },function(){jcrop_obj = this;});
        }

Answer 3

这无疑修复了IE 10兼容模式的初始化问题。