Discussion :

[polakDesIles]

salut a tous, j'ai trouvé un cropper sympa et n'arrive pas à obtenir les infos contenues dans un objet retourné par une fonction.
La doc préçise bien la methode très simple à appeler

Code :

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

$().cropper("getImageData")

Get an object containing image data, contains: "naturalWidth", "naturalHeight", "width", "height", "aspectRatio", "ratio" and "rotate".

J'ai bien essayé de récupérer ces données mais en vain:

Code :

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

1
2
3
4
5
 
$("#image").cropper("getImageData", "height");
$("#image").cropper("getImageData").height;
$("#image").cropper("getImageData").data("height");
//etc...

Voici la methode concernée:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
getImageData: function () {
      var data = {};
 
      if (this.ready) {
        $.each(this.image, function (name, value) {
          if (REGEXP_PROPERTIES.test(name)) {
            data[name] = value;
          }
        });
      }
 
      return data;
    }

Puisse un esprit m'éclairer car je découvre a peine la POO et ce probleme me fait tourner en bourique et le resoudre sera un pas.
Merci et Meilleurs voeux à tous.

[danielhagnoul]

Plugin Image Cropper

• Démonstration et documentation
• Téléchargement

Je le découvre aussi ! C'est toujours en version bêta (v0.7.7-beta) donc il peut y avoir des dysfonctionnements. Je viens de faire un test sur Chrome 39 avec les codes suivants :

Code CSS :

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

1
2
3
4
5
<link href="../cropper-master/dist/cropper.min.css" rel="stylesheet">
<style>
    .img-preview { margin: 24px; width: 160px; height: 90px; overflow: hidden; outline: 1px solid blue; }
    #dataURLInto { width: 300px; height: 200px; overflow: scroll; }
</style>

Code HTML :

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

1
2
3
4
5
6
7
<div class="img-container">
    <img src="../images/Capture.jpg">
</div>
<div class="img-preview"></div>
<button id="btnGetDataURL">Get data URL</button>
<div id="dataURLInto"></div>
<div id="dataURLView"></div>

Code JavaScript :

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
$( function(){ // forme abrégée de $(document).ready(function(
 
    var jObjImage = $( ".img-container img" ),
        jObjDataURLInto = $( "#dataURLInto" ),
        jObjDataURLView = $( "#dataURLView" );
 
    jObjImage.cropper({
        "aspectRatio" : 16 / 9,
        "data" : {
            "x" : 20,
            "y" : 20,
            "width" : 120,
            "height" : 68
        },
        "preview" : ".img-preview"
    });
 
    $( "#btnGetDataURL" ).on( "click", function( ){
        var dataURL = jObjImage.cropper( "getDataURL", { "width" : 360, "height" : 204 } );
 
        jObjDataURLInto.text( dataURL );
        jObjDataURLView.html( '<img src="' + dataURL + '">' );
    });
});

[polakDesIles]

Salut en effet il s'agit bien de ce plugin. En fait je n'ai pas de problème avec la méthode getDataURL, je m'en sert pour enregistrer l'image decoupée via ajax et tout marche bien.
Par contre je voulais récupérer les dimensions réelles de l'image originale et du cadre pour pouvoir centrer ce dernier.

D'après la doc ces infos sont contenues dans un objet retourné par la méthode getImageData mais je n'arrive pas à les lire
Peut etre que je trouverai bientôt un autre moyen de récuperer cela en bricolant un peu le code....

[danielhagnoul]

Je ne comprends pas votre problème, les infos sont facilement disponibles. Exemple :

Code JavaScript :

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
$( "#btnGetDataURL" ).on( "click", function( ){
    var dataURL = jObjImage.cropper( "getDataURL", { "width" : 360, "height" : 204 } );
 
    jObjDataURLInto.text( dataURL );
    jObjDataURLView.html( '<img src="' + dataURL + '">' );
 
    var imageDataSet = jObjImage.cropper( "getImageData" ),
        croppedDataSet = jObjImage.cropper( "getData", true );
 
    console.log( imageDataSet );
 
    /*
     * aspectRatio: 1.0256410256410255
     * height: 292.5
     * naturalHeight: 156
     * naturalWidth: 160
     * ratio: 1.875
     * rotate: 0
     * width: 300
     */
 
    console.log( croppedDataSet );
 
    /*
     * x: 48
     * y: 76
     * width: 97
     * height: 55
     */
});

Vous pouvez déclarer les variables "dataSet" en dehors du gestionnaire d'événement "click" et interroger les valeurs dans une autre fonction , par exemple : var ratio = imageDataSet.aspectRatio;.