如何获取图片的宽高_vs图片获取长度宽度

如何获取图片的宽高

在网页设计和开发中，获取图片的宽高是一个常见的需求。但是，有些人可能不知道该如何实现。在这篇文章中，我将向大家介绍如何获取图片的宽高。

首先，我们需要使用JavaScript来实现这个功能。具体来说，我们需要用到FileReader和Image两个对象。

FileReader对象用于读取文件，而Image对象则用于加载图片。我们可以通过FileReader读取图片文件，并将其转换为DataURL。然后，我们可以创建一个Image对象，并将DataURL赋值给它的src属性。这样，Image对象就可以加载图片了。

当Image对象加载完成后，我们可以获取它的width和height属性，从而得到图片的宽高。

下面是一个示例代码：

export function getImageSize(file: File, src: string) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = function (event) {
            const image = new Image()
            image.onload = function () {
                resolve({
                    width: image.width,
                    height: image.height
                })
            }
            image.onerror = function (error) {
                reject(error)
            }
            image.src = event.target.result
        }
        reader.onerror = function (error) {
            console.log(error)
            reject(error)
        }
        reader.readAsDataURL(file)
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

以上就是获取图片宽高的方法。希望对你有所帮助！