JCrop 的 IE 问题

Posted 2023-02-25

【中文标题】JCrop 的 IE 问题

【英文标题】：IE problems with JCrop

【发布时间】：2012-06-06 14:35:35

【问题描述】：

我在我的 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 中完成这项工作？

【问题讨论】：

您是否收到任何 javascript 错误？

@Aristos - 我什么都看不到:(

【参考方案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;);
        

【讨论】：

只需要发表评论，花了 5 个小时弄清楚为什么 jCrop 只在 IE 上刷新几次后才初始化，这一切都解决了:)

您，先生，是个英雄。但是为什么要检查浏览器而不是总是使用 IE 版本呢？

@ThomasStock: IE 版本不能在 Chrome 上运行。

嗯，经过 5 次测试，它在这里工作。它“有时”不起作用吗？

@ThomasStock：实例化 jcrop 不是我的问题，但我必须动态切换图像并重置 jcrop 的实例。如果我没记错的话，jcrop_obj 在我实现上述内容之前并不总是包含引用。

【参考方案2】：

过去我在 IE 中遇到过 JCrop 的一些问题。我通过将“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>

【讨论】：

我必须修改它以传入 ClientID 而不是 .NET Image 控件的 ID，但除此之外效果很好！编辑添加这个似乎在 Chrome 中破坏了它，但是我可以解决这个问题！

这让它在 IE 中为我工作，但破坏了 Safari。我最终不得不检测浏览器并使用 API 方法（类似于上面，唯一的区别是我将所有选项移动到一个单独的函数）对于 IE 和 normal way 对于所有其他浏览器......似乎一直在工作跨所有浏览器。

【参考方案3】：

这绝对修复了 IE 10 兼容模式的初始化。

【讨论】：

不知道你的答案是什么意思。