web-dev-qa-db-fra.com

Obtenir la largeur et la hauteur d'une image avec Filereader

Je construis une image redimensionner/rogner et j'aimerais afficher un aperçu en direct après l'avoir modifiée dans un fichier modal (bootstrap). Ceci devrait fonctionne, je crois, mais je viens d’obtenir 0 dans console.log. Cela nécessite d'insérer la largeur et la hauteur de l'image d'origine dans un autre script (ce que je ferai après, il vous en faut juste dans console.log/une variable pour le moment).

function doProfilePictureChangeEdit(e) {
    var files = document.getElementById('fileupload').files[0];
    var reader = new FileReader();
    reader.onload = (function(theFile) {
        document.getElementById('imgresizepreview').src = theFile.target.result;

        document.getElementById('profilepicturepreview').src = theFile.target.result;
      }
    );
    reader.readAsDataURL(files);
    var imagepreview = document.getElementById('imgresizepreview');
    console.log(imagepreview.offsetWidth);
    $('img#imgresizepreview').imgAreaSelect({
        handles: true,
        enable: true,
        aspectRatio: "1:1",
        onSelectEnd: preview
    });
    $('#resizeprofilepicturemodal').modal('show');
    };
jquerydomfilereader
30
Martin Alderson

Vous devez attendre que l'image se charge. Essayez de manipuler l'élément dans .onload.

J'ai également simplifié le processus de définition de la source des deux éléments (comment avec jQuery).

reader.onload = (function(theFile) { 
    var image = new Image();
    image.src = theFile.target.result;

    image.onload = function() {
        // access image size here 
        console.log(this.width);

        $('#imgresizepreview, #profilepicturepreview').attr('src', this.src);
    };
});
86
Austin Brunkhorst

Pour moi, la solution d'Austin n'a pas fonctionné, je présente donc celle qui a fonctionné pour moi:

var reader = new FileReader;

reader.onload = function() {
    var image = new Image();

    image.src = reader.result;

    image.onload = function() {
        alert(image.width);
    };

};

reader.readAsDataURL(this.files[0]);

Et si vous trouvez que l'affectation image.src = reader.result; a lieu après image.onload un peu câblé, je le pense aussi.

20
andilabs

c’est ainsi que j’ai pour AngularJS 

          fileReader.readAsDataUrl($scope.file, $scope).then(function(result) {
               var image = new Image();
               image.src = result;
               image.onload = function() {
                    console.log(this.width);
               };
               $scope.imageSrc = result; //all I wanted was to find the width and height


          });

0
Brian Sanchez

Voici une réponse inspirée par Austin Brunkhorst avec un rappel pour déterminer la taille de l’image au cas où vous voudriez réutiliser la fonction ailleurs dans votre code.

fileControl est supposé être un élément jQuery.

function didUploadImage(fileControl) {      
   // Render image if file exists.
   var domFileControl = fileControl[0];
   if (domFileControl.files && domFileControl.files[0]) {
      // Get first file.
      var firstFile = domFileControl.files[0];

      // Create reader.
      var reader = new FileReader();

      // Notify parent when image read.
      reader.onload = function(e) {
         // Get image URL.
         var imageURL = reader.result;

        // Get image size for image.
        getImageSize(imageURL, function(imageWidth, imageHeight) {
            // Do stuff here.
        });
      };

      // Read image from hard disk.
      reader.readAsDataURL(firstFile);

      // Print status.
      console.log("Uploaded image: " + firstFile.name);
   }
}


function getImageSize(imageURL, callback) {      
   // Create image object to ascertain dimensions.
   var image = new Image();

   // Get image data when loaded.
   image.onload = function() {      
      // No callback? Show error.
      if (!callback) {
         console.log("Error getting image size: no callback. Image URL: " + imageURL);

      // Yes, invoke callback with image size.
      } else {
         callback(this.naturalWidth, this.naturalHeight);
      }
   }

   // Load image.
   image.src = imageURL;
}
0
Crashalot