jCrop无法在某些浏览器上首次初始化裁剪

Question

我一直在尝试使用jCrop和PHP创建简单的头像更改/裁剪/上传功能。一切都在Chrome和Opera上完美运行，但它在Safari，Firefox和Internet Explorer上都失败了（都是最新版本）。所以这就是问题 - 当我尝试更改我的头像并在Chrome和Opera上初始化时，它看起来像这样：

当我尝试在Firefox，Safari或Internet Explorer上执行相同操作时，会发生这种情况：

所以我的实现非常简单我只需用HTML5 FormData API选择图像进行ajax调用然后PHP处理请求制作一个临时文件并返回我显示并尝试裁剪的Base64编码图像。当我的ajax调用成功响应时，我只是这样做：

initializeCropping: function() {
        var _this = this;

            this.image.Jcrop({
                onSelect: function(coords) {
                    _this.trackCoordinates(coords);
                },
                bgColor: 'black',
                bgOpacity: .4,
                minSize: [300, 300],
                setSelect: [ 0, 0, 300, 300 ],
                aspectRatio: 1,
                boxWidth: 310,
                boxHeight: 310
            }, function() { _this.jCropApi = this; });
    }

（＆＃34; this.image＆＃34;是对已经创建的图像对象的jQuery选择器的引用） 在初始化关于this question的jCrop之前，我还试图用javascript设置一些超时，但结果是一样的..任何想法？先感谢您！ :)

编辑：仅在第二次选择相同图像时才有效...

Answer 1

如果我理解正确，我认为我遇到了同样的问题

每次完成裁剪或尝试使用或不执行裁剪时关闭jcrop，请尝试调用此函数。在我的情况下，我做了一个ajax调用，以一个模态显示图像，然后允许用户使用jcrop和保存和取消和转义我称为destroyCropData（）函数

function destroyCropData() {
        debugger;
        var prevDim = window.jcropVar;
        prevDim.destroy();
        $("#txtHeight").val("");
        $("#txtWidth").val("");
        $("#txtXpos").val("");
        $("#txtYpos").val("");
    }

并尝试将其值保存在一个使代码

的全局变量中

initializeCropping: function() {
    var jcrop_api;

        this.image.Jcrop({
            onSelect: function(coords) {
                _this.trackCoordinates(coords);
            },
            bgColor: 'black',
            bgOpacity: .4,
            minSize: [300, 300],
            setSelect: [ 0, 0, 300, 300 ],
            aspectRatio: 1,
            boxWidth: 310,
            boxHeight: 310
        }, function() { jcrop_api = this; window.jcropVar = jcrop_api;});
}

希望这是你要求的。对不起，如果这不是你期望的那样

Answer 2

其实我弄清楚了。 css有一个问题，只有Opera和Chorme处理它。图像是一些固定的和高度，然后jCrop的框属性不起作用。无论如何，谢谢你的帮助。