Lire un objet

Version imprimable

Lire un objet

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:

$().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:

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:

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

Plugin Image Cropper

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:

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:

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:

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 + '">' );
    });
});

08/01/2015, 20h27
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 :roll:
Peut etre que je trouverai bientôt un autre moyen de récuperer cela en bricolant un peu le code....

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

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
$( "#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;.