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




dom filereader (3)

मैं एक छवि आकार / फसल का निर्माण कर रहा हूं, और मैं इसे एक मोडल (बूटस्ट्रैप) में संपादित करने के बाद एक लाइव पूर्वावलोकन दिखाना चाहता हूं। यह काम करना चाहिए , मुझे विश्वास है, लेकिन मुझे सिर्फ 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);
    };
});

मेरे लिए ऑस्टिन का समाधान काम नहीं किया, इसलिए मैंने प्रस्तुत किया कि मेरे लिए काम किया गया है:

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

और यदि आपको वह असाइनमेंट image.src = reader.result; छवि के बाद होता है। थोड़ा वायर्ड लोड करें, मुझे भी ऐसा लगता है।


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


          });





filereader