我遇到了一个非常简单的问题，但我对导致问题的原因一无所知。在我的一个应用程序中，我使用 jCrop 作为一个小插件来裁剪图像以适合横幅/标题等。将采取以下步骤:

1) Select an image (using CKFinder for this, CKFinder returns the image path to an input field)
2) Click a button to load the image
3) Crop the image
4) Save the image

在大约 75% 的情况下，一切都按计划进行，但在另外 25% 的情况下，jCrop 无法加载裁剪区域并将其留空。这是我正在使用的 jQuery 代码:

jQuery('#selectimg').live('click', function(e) { 
  e.preventDefault();
  var newsrc = jQuery('#img2').val();
  jQuery('#cropbox').attr('src', newsrc);
  var jcrop_api = jQuery.Jcrop('#cropbox', {
    boxWidth: 700, 
    boxHeight: 700,
    onSelect: updateCoords,
    onChange: updateCoords
  });
  //Some other JS code come's here for buttons (they work all the time)
});

我注意到，当我将 #cropbox 在可裁剪区域中转换的部分放在一边时，图像加载得很好，所以错误在于 var = jcrop_api部分，但我慢慢开始认为没有解决方案......

这是我到目前为止尝试过的:

制作一个 div <div id="cropper-box"></div>并使用 jQuery('#cropper-box').append('<img src="" id="cropbox" />');然后设置值。我尝试了同样的事情，但在 1 步而不是之后设置图像 src。

我试图在页面上放置一个占位符 <img src="placeholder.png" id="cropbox" />并在单击按钮后更改来源。这行得通，但裁剪区域保持图像的大小(300x180 像素或其他大小)并且没有变大。

//编辑:

尝试更多显示图像源已被正确替换(!使用 Firefox 显示所选文本的源)，我仔细检查了 URL，但这是正确的 URL 和工作图像。

在裁剪器应该出现的地方，有一个大约 10x10 像素的白点，裁剪器图标(加号)正在弹出。但如前所述:图像未显示。

//编辑 2:

所以我已经为同一张图片获取了第一次和第二次尝试的来源。如前所述，第一次尝试时图像无法正确加载，第二次尝试时可以(仅当第二次尝试是同一图像时(!!))。

所选页面源显示 1 个不同之处，即首先尝试:

<img style="position: absolute; width: 0px; height: 0px;" src="http://95.142.175.17/uploads/files/Desert.jpg">

第二次尝试:

<img style="position: absolute; width: 700px; height: 525px;" src="http://95.142.175.17/uploads/files/Desert.jpg">

我想这是被 jCrop 替换的图像，但这是一个完整的谜语，为什么它第一次将 0 高度/宽度放在那里，第二次放正确的尺寸。

最佳答案

好的，如果其他人遇到这个问题:

如果加载图像和对其应用 jCrop 的操作排得太快，jCrop 就会变得一团糟。我仍然觉得奇怪的是，第二次尝试完美无缺，但我认为这与页面 DOM 或其他东西识别的缓存图像尺寸有关。

我想出的解决方案是创建一个将#cropbox 转换为 jCrop 区域的函数，然后设置 2 秒的间隔，只是为了给 jCrop 一些时间来识别图像及其尺寸，然后转换元素。

这是我使用的 html 的一部分(带有预加载器):

<div id="cropper-loading" style="display: none;"><img src="images/analytics/ajax-loader.gif" /></div>
<img id="cropbox" src="images/placeholder.png" style="display: none;" />

如您所见，cropbox 图像和 cropper-loading div 都被隐藏了，因为它们不是立即需要的。如果你愿意，你可以显示占位符。然后使用这个 HTML 表单:

<input name="image2" id="img2" type="text" readonly="readonly" onclick="openKCFinder(this)" value="click here to select an image" style="width: 285px;" />  <button class="button button-blue" type="submit" name="load" id="selectimg">Load Image in cropper</button>

在我的例子中，我一直在使用 KCFinder 加载图像(它是 CKEditor 的一部分，真的值得关注!)，KCFinder 处理上传、重命名等，并在选择它后返回选定的图像路径(相对/绝对是可配置的) 到输入字段。

然后当点击#selectimg 时调用这段代码:

jQuery('#selectimg').click(function(e) { 
    e.preventDefault();
    jQuery('#cropper-loading').css('display', 'block');

    var newsrc = jQuery('#img2').val();

    jQuery('#cropbox').attr('src', newsrc);
    jQuery('#img').val(newsrc);

    function createJcropArea() {
        jQuery('#cropper-loading').css('display', 'none');                                      
        jQuery('#cropbox').css('display', 'block');
        var jcrop_api = jQuery.Jcrop('#cropbox', {
            boxWidth: 700, 
            boxHeight: 700,
            onSelect: updateCoords,
            onChange: updateCoords
        });
        clearInterval(interval);
    }
    var interval = setInterval(createJcropArea, 2000);
});

起初我阻止链接像往常一样被跟踪(或按钮操作)，然后显示加载 div(这是我隐藏占位符图像的原因，否则它看起来会很乱)。

然后图像位置从输入字段中加载并复制到另一个(#img)，此字段用于随后处理图像(PHP 使用#img 的值加载此图像)。同时，#cropbox src 被设置为新图像。

下面是解决我问题的部分:

我没有直接激活 jCrop，而是创建了一个函数:

1) hides the loading icon
2) displays the image
3) converts #cropbox into a jCrop area
4) clean the interval (otherwise it would loop un-ending)

在这个函数之后你可以看到，为了保存，我在转换 jCrop 区域之前延迟了 2 秒。

希望它对以后的任何人都有帮助!

干杯并感谢思考@vector 和其他人;-)

关于javascript - jCrop (jQuery) 有时无法加载图像/裁剪区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5937208/