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（build：20120429）和jQuery v1.7.1 jquery.com

如何在IE中完成这项工作？

Answer 1

我最终必须检测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 2

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

净

<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 3

这绝对是IE 10兼容模式的初始化。

IE的问题与JCrop

3 个答案: