javascript - 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; });
    }

(“this.image”是对已创建图像对象的 jQuery 选择器的引用) 我还尝试在初始化 jCrop 之前使用 javascript 设置一些超时关于 this question ，但结果是一样的..有什么想法吗？先感谢您! :)

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

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;});
}

希望这就是您所要求的。抱歉，如果这不是您所期望的