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

Get width and height of an image loaded via a FileReader

本文关键字：高度 图像 获取 FileReader 加载      更新时间：2023-09-26

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

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

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

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

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

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

相关文章：