Question

我有一张通过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();

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

Answer 1

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

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

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

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

获取通过FileReader加载的图像的宽度和高度

1 个答案: