本篇文章主要介绍使用 JavaScript 获取的图像实际大小(宽度和高度),可以使用 El.width 和 El.height 属性。
在业务实际场景中我们经常需要处理上传图片类似的需求,并要对上传的图片做一个图片大小(宽 / 高)的校验, 所以我们需要在这里去获取到上传图片后的图片实际尺寸。
本地加载图片
在加载本地资源的时候,我们只需要直接获取图片元素然后获取图片的宽高就可以了
这里可以看到我们通过获取 DOM 然后使用元素的 width / height 属性就可以获取到元素的具体大小了。
<template>
<div id="app">
<!-- 加载元素 -->
<img ref="images" alt="" :src="imagesSrc" />
</div>
</template>
<script>
export default {
name: "App",
mounted() {
// 获取元素, 并获取宽高
let images = this.$refs["images"];
console.log("🚀 ~ file: App.vue ~ line 18 ~ mounted ~ images", images);
console.log(`宽为${images.width}, 高为${images.height}`);
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
img {
margin: 20px 0;
}
</style>
!但是当我们的图片地址是从服务端或者从其他地址获取的时候,这种方式在异步加载的情况下就不适用了
这是因为图片还未加载完成,代码就已经执行完获取图片大小的逻辑了,所以我们需要对,监听图片是否加载完成,如果加载完成再获取图片的大小
<template>
<div id="app">
<button @click="loadImages">加载图片</button>
<br />
<img ref="images" alt="" :src="imagesSrc" />
</div>
</template>
<script>
let imagesSrc = require("./assets/logo.png");
export default {
name: "App",
data() {
return {
imagesSrc: "",
};
},
methods: {
loadImages() {
this.imagesSrc = imagesSrc;
let images = this.$refs["images"]; // 获取图片元素
// 监听图片加载完成,并在这个时候去获取图片的实际大小
images.addEventListener("load", () => {
console.log(`宽为${images.width}, 高为${images.height}`);
console.log(
"🚀 ~ file: App.vue ~ line 34 ~ images.addEventListener ~ load",
"load"
);
});
}
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
img {
margin: 20px 0;
}
</style>
这样就可以正确的获取到图片的大小了。
我们还需要对图片加载失败的各类情况做兼容,通过监听图片的加载失败事件去处理。
完整代码
<template>
<div id="app">
<button @click="loadImages">加载图片</button>
<br />
<img ref="images" alt="" :src="imagesSrc" />
</div>
</template>
<script>
let imagesSrc = require("./assets/logo.png");
export default {
name: "App",
data() {
return {
imagesSrc: "",
};
},
methods: {
loadImages() {
this.imagesSrc = imagesSrc;
let images = this.$refs["images"]; // 获取图片元素
// 监听图片加载完成,并在这个时候去获取图片的实际大小
images.addEventListener("load", () => {
console.log(`宽为${images.width}, 高为${images.height}`);
console.log(
"🚀 ~ file: App.vue ~ line 34 ~ images.addEventListener ~ load",
"load"
);
});
// 拦截图片加载失败,或其他异常情况的问题
images.addEventListener('error', () => {
console.log("🚀", '图片加载失败!!!')
})
}
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
img {
margin: 20px 0;
}
</style>
如果有问题敬请留言。