从 dataURI 确定图像的尺寸答案

【问题标题】：Determine the dimensions of image from dataURI从 dataURI 确定图像的尺寸
【发布时间】：2017-02-08 19:11:33
【问题描述】：

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

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' 属性中。

【问题讨论】：

标签： javascript html

【解决方案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;
    };
},

解释器完成您的功能后，将立即清理该元素。

【讨论】：