如何获取图片的宽高
在网页设计和开发中,获取图片的宽高是一个常见的需求。但是,有些人可能不知道该如何实现。在这篇文章中,我将向大家介绍如何获取图片的宽高。
首先,我们需要使用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)
})
}
以上就是获取图片宽高的方法。希望对你有所帮助!