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

Posted 2023-02-25

【中文标题】jCrop 无法在某些浏览器上首次初始化裁剪

【英文标题】：jCrop fails to initialise cropping at first time on some browsers

【发布时间】：2014-05-26 06:10:06

【问题描述】：

我一直在尝试使用 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 选择器的引用) 在初始化关于this question 的jCrop 之前，我还尝试使用javascript 设置一些超时，但结果是一样的。有什么想法吗？先感谢您！ :)

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

【参考方案1】：

如果我理解正确的话，我想我也遇到过同样的问题

尝试在每次完成裁剪时调用此函数，或者在他关闭 jcrop 时执行或不执行裁剪。在我的情况下，我进行了 ajax 调用以在模式中显示图像，然后允许用户使用 jcrop 并在保存、取消和转义时我调用了这个 destroyCropData() 函数

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

并尝试将 this 的值保存在生成​​代码的全局变量中

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

希望这是您所要求的。对不起，如果这不是您所期望的

【讨论】：

但是当我希望全局变量仅适用于该范围时，为什么我需要存储它们？

在这种情况下，您不需要全局变量，但如果您必须清除旧坐标的函数不在该范围内，那么我认为我们应该使用全局变量。

嗯，好吧，我将坐标保存在 JavaScript 对象中而不是 DOM 中，并且每次您通过 trackCoordinates(coords) 方法初始化裁剪时，它们都会被替换。我也尝试销毁 jCrop，但它在某些浏览器上不起作用。

【参考方案2】：

其实我想通了。只有 Opera 和 Chorme 处理的 CSS 存在问题。图像的高度和高度是固定的，然后 jCrop 的框属性不起作用。无论如何，谢谢你的帮助。