Jcrop 在特定服务器上的 IE8 下失败,在另一个服务器上工作

Posted

技术标签:

【中文标题】Jcrop 在特定服务器上的 IE8 下失败,在另一个服务器上工作【英文标题】:Jcrop failing under IE8 on specific server, works on another 【发布时间】:2013-07-10 20:49:58 【问题描述】:

Jcrop 在我们的暂存服务器上失败但在生产中运行良好时遇到问题。

两个环境都在相同的硬件上运行,并设置了 apache 虚拟主机。据我们所知,环境是相同的。以下是选择图片上传后加载的模态框中的代码。

<?php $jsIncludes = array(
    "jQuery-File-Upload-and-Crop-plugin/js/vendor/jquery.ui.widget",
    "jQuery-File-Upload-and-Crop-plugin/js/jquery.iframe-transport",
    "jQuery-File-Upload-and-Crop-plugin/js/jquery.Jcrop",
    "jQuery-File-Upload-and-Crop-plugin/js/canvas-to-blob.min",
    "jQuery-File-Upload-and-Crop-plugin/js/load-image.min",
    "jQuery-File-Upload-and-Crop-plugin/js/main"
    );
echo $this->html->script($jsIncludes); 
?>
<link rel="stylesheet" href="/js/jQuery-File-Upload-and-Crop-plugin/css/jquery.Jcrop.css" type="text/css" />
<!-- CSS to make adjusments to some layouts of JQ FURAC -->
<link rel="stylesheet" href="/js/jQuery-File-Upload-and-Crop-plugin/css/jquery.furac.ui.css"> 
<style>
.modal-image-scroll 
    height:420px;
    overflow:auto;
    overflow-x:hidden;

</style>

<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h3 class="modal-title">Image Upload and Crop</h3>
    </div>
    <div class="modal-body"><div class="modal-image"></div></div>
    <div class="modal-footer">
        <form id="opCrop">
<!--            <button class="btn modal-crop" type="button" id="startResize">
                <i class="icon-resize-horizontal"></i>
                Resize to:
            </button> -->
            <a class="btn modal-crop" target="_blank" id="startCrop">
                <i class="icon-th"></i>
                <span>Crop Image to:</span>
            </a>
            <label for="inWidthCrop">Width</label> <input type="number" readonly name="widthCrop" id="inWidthCrop" value="">
            <label for="inHeightCrop">Height</label> <input type="number" readonly name="heightCrop" id="inHeightCrop" value="">

<!--             <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    Clear
                </button> -->
        </form>
    </div>
</div>
<!-- modal for cropping -->
<div id="croppingModal" class="modal hide">
    <div class="modal-header">
        <button type="button" id="btnCloseCrop" class="close" data-dismiss="modal">×</button>
        <h3>Crop Image <span class="dimentions"></span></h3>
    </div>
    <div class="modal-body">

    </div>
    <br />
    <div class="alert alert-info" style="font-size: 12px; padding: 4px 10px 4px 10px;">
        Click and drag over the area of the phone you'd like to use as your profile picture.
    </div>
    <div class="modal-footer">
        <a href="#" class="btn closeModal" data-dismiss="modal" id="btnCancelCrop">Cancel</a>
        <a href="#" class="btn btn-primary" id="btnDoCrop">Crop</a>
    </div>
</div>

有人知道为什么这可能适用于一种环境而不适用于另一种环境吗?

该站点正在使用此库: https://github.com/baamenabar/jQuery-File-Upload-and-Crop

我们在 IE8 下的暂存环境中最终得到的是一个图像,正确裁剪,但无论源图像如何,它都是黑色的。

【问题讨论】:

一个环境是 Intranet 而另一个不是 Intranet?在 Intranet 环境中,IE8 进入兼容模式(IE7) 两者都在使用 Browserstack 进行测试,并且都在互联网上,而不是本地。它们在同一个域上,但一个在子域上。两者都使用完全相同的代码。 【参考方案1】:

这是一个没有答案的老问题,但万一有人来自 Google 搜索,答案是不要担心 IE8。它死了。如果客户需要 IE8 支持,请向客户显示他们需要下载现代浏览器的消息。

【讨论】:

以上是关于Jcrop 在特定服务器上的 IE8 下失败,在另一个服务器上工作的主要内容,如果未能解决你的问题,请参考以下文章

Jcrop 和 IE 问题以及动态添加的图像

jQuery Jcrop 和 PHP 实际上仅在 IE9 中不裁剪图像?

流体图像上的 Jquery JCrop 功能

作物上的Jcrop + Canvas透明图像问题

如何在带有母版页的 ASP.NET 中使用 JCrop

Safari 和 Chrome 中的 Jcrop 坐标被覆盖