Question

在跨浏览器支持中与JCrop和FancyBox进行了一些斗争，这就是我正在做的事情。该应用程序是一个简单的裁剪功能，用户使用razor文件选择图像，jCrop初始化为一个花哨的框，用户在左上角的默认方面显示一个漂亮的虚线框。

这适用于IE，Chrome，FF（80％的时间）和Safari（70％）。

下面的代码用于初始化框和几个屏幕截图，以了解大多数时间发生的事情。

问题1：选择框关闭在左上角（仅发生4/10次）

问题2：FancyBox在一个非常小的窗口中打开（在FF和Safari中发生很多事情而不是在IE浏览器中）

代码：

$(document).ready(function () {
    var jcrop_api;

    function showCoordsBanner(c) {
        $('#ProfileBanner_ImageCrop_XCoord').val(c.x);
        $('#ProfileBanner_ImageCrop_YCoord').val(c.y);
        $('#ProfileBanner_ImageCrop_Width').val(c.w);
        $('#ProfileBanner_ImageCrop_Height').val(c.h);
    };

    function showCoordsProfile(c) {
        $('#Image_ImageCrop_XCoord').val(c.x);
        $('#Image_ImageCrop_YCoord').val(c.y);
        $('#Image_ImageCrop_Width').val(c.w);
        $('#Image_ImageCrop_Height').val(c.h);
    };

    function bindPreview(e, coordFunction, aspectRatio, setSelector) {
        $.fancybox({
            href: "#cropfancybox",
            scrolling: 'none',
            autoSize: false, //Fix for FireFox Load
            autoDimensions: false,
            height: 'auto',
            width: 'auto',
            afterShow: function () {
                $('.fancybox-outer').append(
                $('<div>Drag the corners of the above box to crop your photo</div>', {
                    'style': 'display:inline-block; width:100%; padding:10px 0 0 0; margin-top: 5px'
                }).append(
                $('<input/>', {
                    'class': 'button',
                    'type': 'button',
                    'value': 'Finished Cropping',
                    'onClick': '$.fancybox.close();',
                    'style': 'float:right;'
                })));
                jcrop_api.setSelect(setSelector);
            }
        });

        $('#preview').Jcrop({
            onChange: coordFunction,
            onSelect: coordFunction,
            boxWidth: 1000,
            aspectRatio: aspectRatio
        }, function () {
            jcrop_api = this;
        });
        jcrop_api.setImage(e.target.result);
    }

    $('#File').change(function (evt) {
        if (window.FileReader) {
            var f = evt.target.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                bindPreview(e, showCoordsBanner, 3 / 1, [0, 0, 200, 200]);
            }
            reader.readAsDataURL(f);
        }
    });

    $('#profileImage').change(function (evt) {
        if (window.FileReader) {
            var f = evt.target.files[0];
            var reader = new FileReader();
            reader.onload = reader.onload = function (e) {
                bindPreview(e, showCoordsProfile, 1 / 1, [0, 0, 200, 200]);
            }
            reader.readAsDataURL(f);
        }
    });
});

在FireFox和Safari中使用jCrop花式框的两个问题

0 个答案: