javascript - 从 dataURI 确定图像的尺寸

Question

我允许用户根据这篇文章从文件系统加载自己的图像文件(最后一部分 - 来自本地文件系统的图像)

https://stackoverflow.com/a/20285053

我的代码

handleFiles: function (evt) {
        var file = evt.target.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function (e) {
            var contents = e.target.result;
            console.log(contents);

            //apply contents to src of img element
        };

    },

获取 dataUri 后，我想在屏幕上显示图像，但是有些图像比我显示它们的区域大。有没有办法检查给定 dataUri(宽度和高度)的图像大小并相应地调整大小？

我将 dataUri 放置在图像标签的“src”属性中。

Answer 1

您可以简单地在内存中创建一个元素并从中读取值。假设“contents”是图像的dataURI

handleFiles: function (evt) {
    var file = evt.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function (e) {
        var contents = e.target.result;
        console.log(contents);

        var memoryImg = document.createElement('img');
        memoryImg.src = contents;
        var width = memoryImg.width;
        var height = memoryImg.height;
    };
},

解释器完成您的函数后，该元素将被清理。