web-dev-qa-db-de.com

Breite und Höhe eines Bildes mit Dateileiter ermitteln

Ich baue gerade eine Bildgrößegröße, und ich möchte eine Live-Vorschau anzeigen, nachdem sie sie in einem Modal (Bootstrap) bearbeitet haben. Diese/- sollte Arbeit, glaube ich, aber ich bekomme nur 0 in console.log. Dazu müssen Sie die Breite und Höhe des Originalbildes in ein anderes Skript eingeben (was ich später tun werde, ich brauche sie nur in console.log/einer Variablen).

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');
    };
30
Martin Alderson

Sie müssen warten, bis das Bild geladen ist. Versuchen Sie, das Element in .onload zu behandeln.

Ich habe auch den Prozess zum Festlegen der Quelle der beiden Elemente dahingehend vereinfacht, wie Sie dies tun sollten (mit 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

Für mich hat die Lösung von Austin nicht funktioniert, also präsentiere ich die, die für mich gearbeitet hat:

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

Und wenn Sie feststellen, dass image.src = reader.result; nach image.onload etwas verdrahtet ist, denke ich auch.

20
andilabs

so habe ich 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

Hier ist eine Antwort von Austin Brunkhorst mit einem Rückruf zum Ermitteln der Bildgröße, falls Sie die Funktion an anderer Stelle in Ihrem Code wiederverwenden möchten.

Es wird angenommen, dass fileControl ein jQuery-Element ist.

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