从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放在image标签的'src'属性中。

Answer 1

您可以在内存中创建一个元素并从中读取值。假设＆＃34;内容＆＃34;是图像的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;
    };
},

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