HTML5 - 如何获取图像尺寸

IT技术 javascript html
2021-03-20 16:16:28

我有这个脚本，它用于获取浏览器上传图像的宽度和高度。

参考：http : //renevier.net/misc/resizeimg.html

function createReader(file) {
    reader.onload = function(evt) {
        var image = new Image();
        image.onload = function(evt) {
            var width = this.width;
            var height = this.height;
            alert (width); // will produce something like 198
        };
        image.src = evt.target.result; 
    };
    reader.readAsDataURL(file);
}

for (var i = 0, length = input.files.length; i < length; i++) {
    createReader(input.files[i]);
}

我想从createReader函数外部访问值宽度和高度。我怎样才能做到这一点？

1个回答

更改“createReader”，以便传入要在图像可用时调用的处理程序函数：

function createReader(file, whenReady) {
    reader.onload = function(evt) {
        var image = new Image();
        image.onload = function(evt) {
            var width = this.width;
            var height = this.height;
            if (whenReady) whenReady(width, height);
        };
        image.src = evt.target.result; 
    };
    reader.readAsDataURL(file);
}

现在当你调用它时，你可以传入一个函数来做任何你想做的图像尺寸：

  createReader(input.files[i], function(w, h) {
    alert("Hi the width is " + w + " and the height is " + h);
  });
很棒的答案。如果我可以给 10 个赞，我愿意！！whenReady 真的帮助了我，因为我不知道为什么有时检索高度有效，有时却无效。关于何时使用 whenReady 类型处理程序的任何进一步解释。为什么使用 File API 读取文件需要它？
2021-05-11 16:16:28
@kimsia 很多这样的 API 都是异步的——当你调用它们时，一系列事件会启动，但不会立即发生。“回调”机制允许您放置代码，以便在长期操作完成时运行。网络操作、文件系统交互和其他类似的事情是异步的，因为这些事情涉及到不是即时的硬件现实。
2021-05-15 16:16:28
其它你可能感兴趣的问题
上一篇PHP Ajax上传进度条 下一篇如何使用 lodash 从列表中删除元素？