jquery - फ़ाइलreader के साथ एक छवि की चौड़ाई और ऊंचाई प्राप्त करना




dom filereader (2)

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


          });

मैं एक छवि आकार / फसल का निर्माण कर रहा हूं, और मैं इसे एक मोडल (बूटस्ट्रैप) में संपादित करने के बाद एक लाइव पूर्वावलोकन दिखाना चाहता हूं। यह काम करना चाहिए , मुझे विश्वास है, लेकिन मुझे सिर्फ console.log में 0 मिलता है। इसके लिए मूल छवि की चौड़ाई और ऊंचाई को दूसरी स्क्रिप्ट में खिलाना आवश्यक है (जो मैं बाद में करूंगा, बस उन्हें console.log / a variable में चाहिए)

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

आपको छवि लोड होने की प्रतीक्षा करनी है। अंदर तत्व को संभालने का प्रयास करें।

मैंने दो तत्वों के स्रोत को सेट करने की प्रक्रिया को सरल बना दिया है कि आपको यह कैसे करना चाहिए (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);
    };
});




filereader