[JQuery]Cropping et resize d'une image avec JCrop et fonction resize

Version imprimable

15/08/2009, 20h16
Lysen

[JQuery]Crop et resize d'une image avec JCrop et fonction resize

Bonjour à tous,

Après une brève recherche sans succès, me voici avec ma colle (forte)...

Je souhaite réaliser un bout de code qui, pour chaque image se trouvant sur la page, applique quelques fonctions.
Le but que je cherche à atteindre, c'est associer un resize (redimensionnement des images se trouvant sur la page) avec un crop (sélection d'une partie de l'image [pour le moment] en vue d'un découpage)
Puisque ce code nécessite l'agrégation de plusieurs fonctions/librairies, j'ai d'abord veillé à créer des codes qui fonctionnent séparément.
Un problème est survenu lorsque j'ai souhaité fusionner mes scripts...
On m'a déjà donné un coup de main et l'on m'a dit que c'était la librairie JCrop qui posait quelques problèmes. N'étant pas un professionnel, je ne peux qu'écouter et apprendre de ce que l'on me dit.
Ne souhaitant pas flooder sur ce forum en postant mon code .JS de 80 lignes et celui de la librairie JCROP (1200 l.)dont j'ai dû modifier 2-3 petites choses, je place ici 2 liens représentant l'avancée de la chose...

Le premier lien fournit (entre autre) 2 fichiers séparés(dans le dossier HTML), où tout fonctionne, ainsi qu'un troisième fichier qui fusionne les deux fonctions mais où l'image ne s'agrandit plus qu'en ghost...
http://dl.free.fr/jLUwjkLhi

Le deuxième lien fournit l'état actuel des choses, i.e. après la modification de la librairie et de mon fichier html en fonction de ce qui a été fait à la libraire.
http://dl.free.fr/mqc3VJIRp

Ces modifications de la librairie ont porté sur l'ajout, à la ligne 1094 du fichier JCROP.JS,, de :
function bounds(w, h){
boundx = w;
boundy = h;
interfaceUpdate();
}

et ensuite à la ligne 1152:
bounds: bound,

(J'ai écrit ces 5 lignes pour vous éviter de les chercher parmi les 1200)

Quelqu'un verrait-il la solution ? Le problème dans mon code ? Dans celui de la libraire ?

Peut-être JCrop et resize ne vont-ils pas ensemble. Si c'est le cas, j'ai trouvé un autre plugin pour la sélection (pour le crop), il s'agit d'imgAreaSelect, mais lorsque j'y ajoute ma fonction de resize, j'ai aussi quelques soucis. Toutefois, imgAreaSelect m'a l'air beaucoup plus léger que JCrop. Lequel me conseillez-vous ?

Je vous remercie d'avance pour votre aide.

Salutations,

DarLys

Bonsoir.

Il y avait du travail, beaucoup de travail !

Voici les trois fichiers HTML corrigés :

Code:

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
33
34
35
36
37
38
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Resize</title>
    <link type="text/css" href="../css/ui.allPERSO.css" rel="stylesheet" />
    <link type="text/css" href="../css/Une_Ligne.css" rel="stylesheet" />
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="../js/ui.core.js"></script>
    <script type="text/javascript" src="../js/ui.resizable.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
 
            /*
            * Il faut préciser la taille de l'image
            * Sinon certain navigateur se comporte bizarement !
            */
            $("img").resizable(
                {
                    maxHeight: 370,
                    maxWidth: 500,
                    aspectRatio: true,
                    ghost: true
                }
            );
 
        });
    </script>
</head>
<body>
    <div style="text-align:left;">
        <img src="../images/flowers.jpg" width="500" height="370" />
        <br />
        <img src="../images/flowers2.jpg" width="500" height="370" />
    </div>
</body>
</html>

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Crop</title>
    <link type="text/css" href="../css/ui.allPERSO.css" rel="stylesheet" />
    <link type="text/css" href="../css/Une_Ligne.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
    <style type="text/css">
        div.jc_coords
        {
            width: 500px;
        }
        div.jc_coords form
        {
            margin: .5em 0;
            padding: .5em;
            border: 1px solid;
            background: #ccc;
            border-color: #C3C3C3 #8B8B8B #8B8B8B #C3C3C3;
        }
        div.jc_coords input
        {
            width: 3.5em;
        }
        div.jc_coords label
        {
            margin-right: .5em;
            font-weight: bold;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="../js/ui.core.js"></script>
    <script type="text/javascript" src="../js/jquery.Jcrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("img").Jcrop({
                onChange: showCoords,
                onSelect: giveCoords
            });
 
            function showCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#x2').val(c.x2);
                $('#y2').val(c.y2);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
 
            function giveCoords(c){
                alert("Les coordonnees sont les suivantes : \nOrigine : x= " + c.x + " et y= " + c.y + 
                            "\nExtrémité : x= " + c.x2 + " et y= " + c.y2 + 
                            "\nLa largeur de la sélection fait " + c.w + " pixels, et la hauteur fait " + c.h + " pixels");
            }
 
        });
    </script>
</head>
</head>
<body>
    <div class="jc_coords">
        <form onsubmit="return false;">
            <label>
            X1
            <input id="x" type="text" name="x" size="4"/>
            </label>
            <label>
            Y1
            <input id="y" type="text" name="y" size="4"/>
            </label>
            <label>
            X2
            <input id="x2" type="text" name="x2" size="4"/>
            </label>
            <label>
            Y2
            <input id="y2" type="text" name="y2" size="4"/>
            </label>
            <label>
            W
            <input id="w" type="text" name="w" size="4"/>
            </label>
            <label>
            H
            <input id="h" type="text" name="h" size="4"/>
            </label>
        </form>
    </div>
    <div style="text-align:left;">
        <img src="../images/flowers.jpg" width="500" height="370" />
        <br />
        <img src="../images/flowers2.jpg" width="500" height="370" />
    </div>
</body>
</html>

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Crop et resize</title>
    <link type="text/css" href="../css/ui.allPERSO.css" rel="stylesheet" />
    <link type="text/css" href="../css/Une_Ligne.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
    <style type="text/css">
        div.jc_coords
        {
            width: 500px;
        }
        div.jc_coords form
        {
            margin: .5em 0;
            padding: .5em;
            border: 1px solid;
            background: #ccc;
            border-color: #C3C3C3 #8B8B8B #8B8B8B #C3C3C3;
        }
        div.jc_coords input
        {
            width: 3.5em;
        }
        div.jc_coords label
        {
            margin-right: .5em;
            font-weight: bold;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="../js/ui.core.js"></script>
    <script type="text/javascript" src="../js/ui.resizable.js"></script>
    <script type="text/javascript" src="../js/jquery.Jcrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            /*
            * avec $("img").Jcrop(...);
            * et $("img").resizable(..);
            * IE 8 crée quatre images !
            * une pour Jcrop et une pour resizable pour chaque image.
            */
            $("#img1").Jcrop({
                onChange: showCoords,
                onSelect: giveCoords
            });
 
            function showCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#x2').val(c.x2);
                $('#y2').val(c.y2);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
 
            function giveCoords(c){
                alert("Les coordonnees sont les suivantes : \nOrigine : x= " + c.x + " et y= " + c.y + 
                            "\nExtrémité : x= " + c.x2 + " et y= " + c.y2 + 
                            "\nLa largeur de la sélection fait " + c.w + " pixels, et la hauteur fait " + c.h + " pixels");
            }
 
            /*
            * Il faut préciser la taille de l'image
            * Sinon certain navigateur se comporte bizarement !
            */
            $("#img2").resizable(
                {
                    maxHeight: 370,
                    maxWidth: 500,
                    aspectRatio: true,
                    ghost: true
                }
            );
 
        });
    </script>
</head>
</head>
<body>
    <div class="jc_coords">
        <form onsubmit="return false;">
            <label>
            X1
            <input id="x" type="text" name="x" size="4"/>
            </label>
            <label>
            Y1
            <input id="y" type="text" name="y" size="4"/>
            </label>
            <label>
            X2
            <input id="x2" type="text" name="x2" size="4"/>
            </label>
            <label>
            Y2
            <input id="y2" type="text" name="y2" size="4"/>
            </label>
            <label>
            W
            <input id="w" type="text" name="w" size="4"/>
            </label>
            <label>
            H
            <input id="h" type="text" name="h" size="4"/>
            </label>
        </form>
    </div>
    <div style="text-align:left;">
        <img id="img1" src="../images/flowers.jpg" width="500" height="370" />
        <br />
        <img id="img2" src="../images/flowers2.jpg" width="500" height="370" />
    </div>
</body>
</html>

Il reste des problèmes de compatibilité entre les navigateurs, principalement IE 8 qui fait à sa façon comme d'habitude. Voir les commentaires dans le code.

17/08/2009, 11h53
Lysen

Merci pour la réponse et les corrections !
J'imagine bien qu'avant de poster, tu as constaté que ça marchait chez toi.
Mais...vu que chez moi, rien ne fonctionne, et que j'utilise Firefox 3.5.2, je me suis demandé sur quel navigateur as-tu essayé les scripts ? :)
Et c'est étrange que ça ne joue pas sur Firefox, vu que les libraires JQuery, Jcrop, et la fonction resize sont toutes compatible avec Firefox. Me manque-t-il quelque chose ?
En gros, quand j'ouvre mon fichier HTML, je me retrouve avec 2 image. Et au sommet de la page se trouve le "rectangle" pour afficher les coordonnées. Aucune interaction possible...
Est-ce normal ?

Edit : Je viens d'essayer avec IE 6 (le pire) et...ça marche, ou presque, c'est à dire que la première image est seulement cropable, et la deuxième seulement resizable. Encore que ce n'est pas un resize, mais un découpage de mon image, qui ne fonctionne que lorsque je réduis ladite image...Donc j'imagine que ça ne fonctionne parfaitement que sous IE 8 ?
Comment rendre tout ça compatible avec les autres navigateurs ?
De plus, il faudrait que les fonctions ne s'appliquent ni aux classe, ni aux id, mais bien à tout ce qui commence par "<img src="..." C'est hard...je me casse le plot depuis un sacré moment XD
17/08/2009, 12h26
danielhagnoul

Bonjour.

Si on regarde les commentaires dans le code, on peut en déduire que j'ai testé sous Frirefox, Chrome et Internet Explorer 8.

Si on regarde les commentaires dans le code, on sait que le fichier "Crop et resize" donne la fonction crop sur la première image et la fonction resize sur la seconde et l'on sait pourquoi.

Le fichier "Crop" agit sur deux images. Il y a des commentaires dans le code.
Le fichier "Resize" agit sur deux images. Il y a des commentaires dans le code.

Désolé, mais je n'ai plus de temps à consacrer à ce problème, il me semble même résolu.
17/08/2009, 13h19
Lysen

Le resize qui devrait agrandir/rétrécir l'image en gardant les proportions me crope l'image, car comme tu me l'as expliqué, il y a 2 images par fonctions et visiblement, les deux fonctions se marchent dessus si on les fait s'appliquer aux éléments "img".

Un exemple ce que j'entends par resize se trouve ici : http://jqueryui.com/demos/resizable/aspect-ratio.html

Vu que je ne souhaite pas devoir rajouter manuellement une classe à chaque image, (imaginez, si je place 350 images, et qu'il faille à chaque fois redéfinir une fonction pour chaque image...), est-ce que qqun connaîtrait une fonction de type resize ou crop qui ne crée qu'une image, et pas deux ?
Merci d'avance :)

Edit : Problème résolu en utilisant imgAreaSelect.