获取通过 FileReader 加载的图像的宽度和高度 [重复]

Posted 2023-03-15

【中文标题】获取通过 FileReader 加载的图像的宽度和高度 [重复]

【英文标题】：Get width and height of an image loaded via a FileReader [duplicate]

【发布时间】：2014-08-01 16:23:37

【问题描述】：

我有一张通过FileReader 创建的图片：

    var fileReader = new FileReader();
    var deferred = $.Deferred();

    fileReader.onload = function(event) 
        deferred.resolve(event.target.result);
    ;

    fileReader.onerror = function() 
        deferred.reject(this);
    ;

    fileReader.readAsDataURL(file);

    return deferred.promise();

这将返回一个 base64 编码的字符串，我使用它：

var img = $('<img src="' + fileB64 + '">');

然后将其添加到我的页面中。

我希望得到该图像的原始高度和宽度。

我可以通过以下方式在页面上获取它的大小：

this.img = img;
this.imgWidth = this.img.width();
this.imgHeight = this.img.height();

但我希望得到它原来的宽度和高度。

【问题讨论】：

您可以将onload 事件添加到您的图像并在回调中检查高度和宽度是多少。

这不是重复的 - 我是在询问图像的原始宽度和高度。

@user3729576 它是 this question的副本。

@Jack 不，不是。我想要查询对象的原始宽度，

查询对象的原始宽度？那有什么意思？你能举一个更清楚的例子来说明你需要什么吗？

【参考方案1】：

我认为确定图像宽度和高度的唯一方法是实际创建一个图像元素，然后从中获取尺寸：

var img = new Image();
img.src = fileB64;
var width = img.width;
var height = img.height;

我假设（即我没有检查）将data: URL 加载到图像的src 属性中会导致它同步加载。否则使用img.onload。

像这样在屏幕外创建元素后，您可以将相同的元素添加到页面中。

【讨论】：

我如何将图像添加到页面？将尺寸添加到页面后，我需要稍后在另一个类中获取尺寸。

只使用你正常的 jQuery 东西，例如$(document.body).append(img)

那么你如何获得图像的原始宽度和高度？

如果它已经在页面中，只需阅读元素的width 和height 属性，还是在插入之前以某种方式修改元素的大小？如果是这样，所提出的问题就是一个完全的红鲱鱼。不过，在现代浏览器上，您也许可以使用 naturalWidth 和 naturalHeight 属性。