JS 获取图片的实际大小

        本篇文章主要介绍使用 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>

如果有问题敬请留言。