jCrop (jQuery) ne parvient parfois pas à charger la zone d'image / de recadrage

Bon, les gars, au cas où quelqu'un d'autre s'exécute dans ce problème:

jCrop un peu se foiré si les actions de chargement d'une image et d'appliquer jCrop sont mis en file d'attente trop rapide après l'autre. Je trouve toujours étrange que d'une deuxième tentative fonctionne parfaitement, mais je pense que cela a quelque chose à voir avec le cache de l'image dimensions qui sont reconnus par le DOM de la page ou quelque chose.

La solution je suis venu avec était par la création d'une fonction qui convertit les #zones de recadrage dans un jCrop de la zone et de définir ensuite les 2 secondes d'intervalle, juste pour donner jCrop un certain temps à reconnaître l'image et ses dimensions, puis de convertir l'élément.

C'est la partie de code html que j'ai utilisé (avec un 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;" />

Comme vous pouvez le voir à la fois les zones de recadrage de l'image et cropper-chargement div sont masqués car ils ne sont pas nécessaires instantanément. Vous pouvez afficher l'espace réservé si vous le voulais bien.. Alors ce formulaire HTML est utilisé:

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

Dans mon cas, j'ai été en utilisant KCFinder pour charger les images (c'est une partie de CKEditor, vraiment la peine de regarder!), KCFinder gère les téléchargements, renommer etc et après avoir choisi, il renvoie l'image choisie chemin (relatif/absolu est configurable) pour le champ de saisie.

Puis en cliquant #selectimg ce code est appelé:

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

Au début, je prévenir le lien aussi être suivi comme il le ferait normalement (ou le bouton de action) et après que le chargement de la div s'affiche (c'est ma raison de cacher l'image d'espace réservé, sinon il aurait l'air foiré).

Ensuite, l'emplacement de l'image est chargé à partir du champ de saisie et copié dans un autre (#img), ce champ est utilisé pour traiter l'image par la suite (PHP utilise la valeur de #img pour charger cette image). Aussi, simultanément, le #zones de recadrage src est en cours de mise pour la nouvelle image.

Et voici la partie qui a résolu mon problème:

Au lieu de directement l'activation de jCrop, j'ai fait une fonction qui:

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)

Et après cette fonction, vous pouvez voir que, pour être tranquille, j'ai pris 2 secondes de délai avant le jCrop zone est en cours de conversion.

Espère que cela aide quelqu'un dans le futur!

Salut et merci de penser à @vecteur et qui d'autre l'a fait 😉

Essayer le bord de la bibliothèque sur le repo ici: https://github.com/tapmodo/Jcrop

Cela devrait résoudre votre problème. Les lignes sont modifiées pour résoudre votre problème:

//Fix size of crop image.
//Necessary when crop image is within a hidden element when page is loaded.
if ($origimg[0].width != 0 && $origimg[0].height != 0) {
  //Obtain dimensions from contained img element.
  $origimg.width($origimg[0].width);
  $origimg.height($origimg[0].height);
} else {
  //Obtain dimensions from temporary image in case the original is not loaded yet (e.g. IE 7.0).
  var tempImage = new Image();
  tempImage.src = $origimg[0].src;
  $origimg.width(tempImage.width);
  $origimg.height(tempImage.height);
}

Ici chelou mais fantastique solution:

if (obj.tagName == 'IMG') {
  var tempImage = new Image();
    tempImage.src = $origimg[0].src;
    $origimg.width(tempImage.width);
    $origimg.height(tempImage.height);
  if ($origimg[0].width > 1 && $origimg[0].height > 1) {
    $origimg.width($origimg[0].width);
    $origimg.height($origimg[0].height);
  } else {
    var tempImage = new Image();
    tempImage.src = $origimg[0].src;
    $origimg.width(tempImage.width);
    $origimg.height(tempImage.height);
     //console.log('error'+$origimg[0].width + $origimg[0].height);
  }