获取图像的宽度和高度

I am building an image resize/crop, and I'd like to show a live preview after they've edited it in a modal (bootstrap). This should work, I believe, but I just get 0 in console.log. This requires feeding the width and the height of the original image into another script (which I'll do after, just need them in console.log/a variable for now)

我正在构建一个图像大小调整/裁剪，我想在他们用模式(引导)对其进行编辑后显示一个实时预览。我想这个应该可以，但是我在console.log中得到0。这需要将原始图像的宽度和高度输入到另一个脚本中(稍后我将这样做，只需要在控制台中使用它们)。日志/一个变量现在)

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

3 个解决方案

#1

You have to wait for the image to load. Try handling the element inside .onload.

您必须等待图像加载。尝试在.onload中处理元素。

I've also simplified the process of setting the source of the two elements to how you should be doing it (with jQuery).

我还简化了将这两个元素的源代码设置为如何(使用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);
    };
});

#2

For me the solution of Austin didn't work, so I present the one worked for me:

对我来说，奥斯汀的解决方案行不通，所以我提出了一个对我有效的方案:

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

And if you find that assignment image.src = reader.result; takes place after image.onload a bit wired, I think so too.

如果你找到那个赋值图像。src = reader.result;发生后的形象。我也这么认为。

#3

this is the way I have for AngularJS

这就是我对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


          });

#1