使用Javascript File API获取图像尺寸 [英] Getting Image Dimensions using Javascript File API

问题描述

我需要在Web应用程序中生成图像的缩略图。我使用Html 5 File API生成缩略图。

I require to generate a thumbnail of an image in my Web Application. I make use of the Html 5 File API to generate the thumbnail.

我利用以下网址中的示例来生成缩略图。

I made use of the examples from the below URL to generate the thumbnails.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

我已成功生成缩略图。我遇到的问题是我只能使用静态大小生成缩略图。有没有办法从所选文件中获取文件尺寸，然后创建Image对象？

I am successfully able to generate the thumbnails. The problem that I have is I am able to generate thumbnail only by using a static size. Is there a way to get the file dimensions from the selected file and then create the Image object?

推荐答案

是的，请阅读文件作为数据URL并将该数据URL传递给 Image 的 src ： http://jsfiddle.net/pimvdb/eD2Ez/2/ 。

Yes, read the file as a data URL and pass that data URL to the src of an Image: http://jsfiddle.net/pimvdb/eD2Ez/2/.

var fr = new FileReader;

fr.onload = function() { // file is loaded
    var img = new Image;

    img.onload = function() {
        alert(img.width); // image is loaded; sizes are available
    };

    img.src = fr.result; // is the data URL because called with readAsDataURL
};

fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating

这篇关于使用Javascript File API获取图像尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！