jCrop(jQuery)有时无法加载图像/裁剪区域 [英] jCrop (jQuery) sometimes fails to load image/cropper area

问题描述

我有一个非常简单的问题，但是对于导致问题的原因我一无所知.在我的一个应用程序中，我将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" />上放置一个占位符，并在单击按钮时更改了源.可以，但是裁剪区域保持图像的大小(300x180px左右)，并且不会像应该的那样变大.

//

尝试更多操作后，我发现图像源已正确替换(！使用Firefox显示所选文本的源)，我再次检查了URL，但这是正确的URL和有效的图像.

在应该放置裁剪器的地方，出现了一个大约10x10像素的白色斑点，其中弹出了裁剪器图标(加号)..但是如前所述:图像未显示.

//

因此，我将第一幅和第二幅图像的来源都用于同一张图像.如前所述，第一次尝试将无法正确加载图像，第二次尝试将无法正确加载图像(仅当第二次尝试具有相同的图像(!!)时).

所选页面来源显示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 heigth/width，在第二次放置适当的大小.

解决方案

好的，以防万一其他人遇到此问题:

如果加载图像和对其应用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图像和croperper-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以及其他人所做的;-)

I've got a pretty simple problem, but I've become clueless on what is causing the problem. In one of my applications I'm using jCrop as a small add-on to crop images to fit in banners/headers etc. These steps will be taken:

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

in about 75% of the cases everything goes according to plan, however the in the other 25% of the cases jCrop fails to load the cropping area and leaves it blank. Here's the jQuery code I'm using:

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

I noticed that when I left the part away where #cropbox is being transformd in a cropable area, that the image is loading just fine, so the mistake lies with the var = jcrop_api part, but I slowsly start to think that there is no solution for this...

This is what I've tried so far:

Making a div <div id="cropper-box"></div> and use jQuery('#cropper-box').append('<img src="" id="cropbox" />'); and afterwards set the value. I tried the same thing but setting the image src in 1 step instead of afterwards.

I tried to put a placeholder on the page <img src="placeholder.png" id="cropbox" /> and change the source upon clicking the button. This works, but the cropperarea stays the size of the image (300x180px or something) and doesn't get bigger as it should.

// Edit:

Trying some more showed me that the image source is being replaced properly(! using Firefox to show the source for the selected text), I double checked the URL but this was a correct URL and a working image.

At the place where the cropper should be, there's an about 10x10 pixel white spot where the cropper icon (a plus sign) is popping up.. but as said before: the image isn't shown.

// Edit 2:

So I've took the sources for both the 1st and the 2nd try for the same image. As told before the first try the image won't load properly and the 2nd try it does (only when the 2nd try is the same image(!!)).

The selected page source shows 1 difference which is, first try:

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

second try:

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

I guess this is the image that's being replace by jCrop, but it's a complete riddle why it puts 0 heigth/width in there the first and the proper sizes the second time.

解决方案

Okay guys, in case anyone else runs into this problem:

jCrop kinda gets messed up if the actions of loading an image and applying jCrop to it are queued too fast after eachother. I still find it strange that a second attempt works perfect, but I think that has something to do with cached image dimensions which are recognized by the DOM of the page or something.

The solution I came up with was by creating a function that converts the #cropbox into a jCrop area and then setting a 2 second interval, just to give jCrop some time to recognize the image and it's dimensions and then convert the element.

This is the part of html I used (with a preloader):

<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;" />

As you can see both the cropbox image and cropper-loading div are hidden as they are not needed instantly. You could display the placeholder if you wanted though.. Then this HTML form is used:

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

In my case I've been using KCFinder to load the images (it's part of CKEditor, really worth watching into!), KCFinder handles uploads, renaming etc and after choosing it returns the chosen image path (relative/absolute is configurable) to the input field.

Then when clicking #selectimg this code is called:

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

At first I prevent the link too be followed as it normally would (or button action) and after that the loading div is displayed (that's my reason for hiding the placeholder image, otherwise it would look messed up).

Then the image location is being loaded from the input field and copied into another (#img), this field is used to process the image afterwards (PHP uses the value of #img to load this image). Also simultaneously the #cropbox src is being set to the new image.

And here comes the part which solved my problem:

Instead of directly activating jCrop, I've made a function that:

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)

And after this function you can see that, just to be save, I took 2 seconds delay before the jCrop area is being converted.

Hope it helps anyone in the future!

Cheers and thanks for thinking @vector and whoever else did ;-)

这篇关于jCrop(jQuery)有时无法加载图像/裁剪区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！