jCrop(jQuery)有时无法加载图像/裁剪区域

Question

我有一个非常简单的问题,但我对导致问题的原因一无所知.在我的一个应用程序中,我使用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" />');然后设置值.我尝试了同样的事情,但是将图像src设置为1步而不是之后.

我试图在页面上放置一个占位符,<img src="placeholder.png" id="cropbox" />并在单击按钮时更改源.这是有效的,但是cropperarea保持图像的大小(300x180px或其他东西)并且不会变得更大.

//编辑:

尝试更多的东西向我展示了图像源正在被正确替换(!使用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高度/宽度,第二次放置适当的尺寸.

Answer 1

好的伙计们,以防其他人遇到这个问题:

如果加载图像并对其应用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和其他人的想法;-)