Discussion :

[titouille]

Bonjour à tous,

Etant assez débutant dans l'utilisation de JQuery et Ajax, je me tourne vers la communauté, peut-être pourra-t-elle m'aider à comprendre certaines choses...

Je dois utiliser JCrop dans une page d'un site web. J'ai pu l'installer correctement mais maintenant je me trouve confronté à un problème de "sélection"...

J'ai une image qui fait, admettons, w:3000 par h:2000. J'en fais tout d'abord un clone redimensionné (750 x 500) pour l'affichage dans JCrop. J'affiche ensuite ce clone sur ma page afin de pouvoir le lier à JCrop.

Mon problème est le suivant : mon image devra respecter les dimensions finales suivantes : largeur >= 750, hauteur = 500 fixe.

J'ai déjà compris comment utiliser la propriété trueSize ainsi que minSize et maxSize, mais je n'arrive pas à faire en sorte que les propriétés soient respectées... En gros :

Sachant que dans mon exemple, le ratio d'affichage entre le clone et l'original est de 4, alors la zone de crop devrai être au minimum de w:187.5 à l'affichage (750 / 4) et de h:125 (500 / 4).
Mais je ne peux pas utiliser la propriété "ratio" car au final la largeur n'a pas à être fixe, mais simplement plus grande ou égale à 580.

Le truc, c'est qu'il faudrai que je recalcule "on the fly" à chaque modification de la zone quelle est la largeur minimum à respecter et la réaffecter à la propriété minSize pour toujours respecter les valeurs finales...

Actuellement, je peux avoir une image qui ne respecte pas ma donnée car je ne sais pas comment réaffecter cette valeur à la volée...
Je sais qu'il y a un gestionnaire d'évènement "onChange" sur JCrop, mais je ne sais pas comment accéder à la propriété voulue...

Voilà le code que j'ai pour l'initialisation de JCrop :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var api = undefined;
 
// equivalent de $(window).load(function() {...} avec Drupal
Drupal.behaviors.watcho_picture = function( context ) {
 
  api = $.Jcrop( "#standard_picture", {
    onChange : showPreview,
    onSelect : showPreview,
    minSize  : [Drupal.settings.watcho_picture.previeww, Drupal.settings.watcho_picture.previewh],
    maxSize  : [10000, Drupal.settings.watcho_picture.previewh],
    trueSize : [Drupal.settings.watcho_picture.truew, Drupal.settings.watcho_picture.trueh],
  } );
}

Le but serait donc de pouvoir réattribuer à la propriété minSize une nouvelle valeur lors de l'appel à showPreview, mais je n'arrive pas à comprendre comment faire... Je n'ai pas d'accès ni à api.options ni à api.opt... Je ne sais d'ailleurs même pas si le fait de réaffecter à la volée va permettre de prendre en compte la nouvelle valeur (peut-être une sorte de fonction redraw ou autre...)


Bref... Si quelqu'un avait la gentillesse de m'expliquer comment je peux accéder aux propriétés de mon objet JCrop je lui en serait reconnaissant car là je galère...

D'avance merci pour vos suggestions.


Cordialement.

[danielhagnoul]

Bonsoir

Après une recherche sur Google, il semble qu'il y a plusieurs plug-ins jQuery portant le même nom. Pourriez-vous donner un lien vers le vôtre s'il vous plaît ?

[titouille]

Hello,

Tout d'abord, le plugin jcrop que j'utilise est celui de deepliquid : http://deepliquid.com/content/Jcrop.html

Ensuite j'ai fini par trouver comment arriver à mon but :

Le plugin propose 2 évènements onChange et onSelect. J'ai créé deux variables globale "change:Boolean" et "api:Jcrop". Puis j'ai initialisé mon objet Jcrop via la méthode d'api et je l'ai stockée dans la variable api.
enfin, j'ai placé le même écouteur sur les 2 évènements. C'est dans la fonction d'écoute que je teste si "change" = false. Si c'est le cas, je le passe à vrai, puis je recalcule les coordonnées possibles selon le changement de sélection l'utilisateur. Si ce n'est pas le cas, je passe la variable "change" à false.

Si je ne fais pas ce test avec la variable "change", le script plante car il appelle sans discontinuer l'évènement, puisqu'à l'intérieur de la fonction je change les coordonnées.

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
var api = undefined;
var ratio = undefined;
var ratiowh = undefined;
var change = false;
Drupal.behaviors.watcho_picture = function( context ) {
 
  ratio = Drupal.settings.watcho_picture.ratio;
  ratiowh = Drupal.settings.watcho_picture.ratiowh;
 
  api = $.Jcrop( "#standard_picture", {
    onChange : changeSelection,
    onSelect : changeSelection,
    minSize  : [Drupal.settings.watcho_picture.minw, Drupal.settings.watcho_picture.minh],
    maxSize  : [Drupal.settings.watcho_picture.maxw, Drupal.settings.watcho_picture.maxh],
    trueSize : [Drupal.settings.watcho_picture.truew, Drupal.settings.watcho_picture.trueh],
  } );
}
 
function changeSelection( coords ) {
 
  if( change == false ) {
    change = true;
 
    var t = coords.h / coords.w;
    if( t > ratiowh )
      api.setSelect( [ coords.x, coords.y, coords.h / ratiowh, coords.h ] );
  }
  else {
  	change = false;
  }
}

C'est pas super compréhensible car les valeurs sont récupérées depuis Drupal, mais en gros mon problème est à peu près résolu. Il y a juste que ça me donne certaines saccades de temps en temps lors du recalcul, mais c'est un moindre mal.

[danielhagnoul]

Bonjour

Oui, l'instabilité est normale, car on joue sur deux types d'événements en même temps. Avez-vous essayé d'utiliser uniquement "onChange", cela pourrait régler le problème.

Je ne connais pas ce plug-in, il y en a des milliers, et je ne sais pas si cela pourra vous aider, mais connaissez-vous la page API : http://deepliquid.com/content/Jcrop_API.html et les méthodes disponibles.

Attention à la remarque sur la nécessaire utilisation de "$(window).load(function(){" pour pouvoir utiliser les fonctions disponibles.

[titouille]

Re-bonjour daniel

Alors non, je n'ai pas testé de ne faire la modif que sur un des deux évènements, je testerai d'ici peu.

Sinon bien entendu que j'ai parcouru la doc, c'est généralement par là que je commence. Et concernant le window.load, le CMS Drupal a mis en place toute une technique pour simplifier l'utilisation de jQuery qui est totalement intégré dans le système... L'utilisation de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Drupal.behaviors.MYMODULE = function( context ) { ... }

est similaire à un window.load ;-)

Voilà. En tout cas merci pour la suggestion sur l'utilisation d'un seul évènement, à tester.