获取上传图片的尺寸！

Question

前提条件：在特点大小的框中，图片的宽和高100%在框中展示
问题：获取上传图片的尺寸，并让多个框在图片上展示
期望结果：

解决方法：

<div
            ref="box"
            :style="{
              top: `${item.boxTop}`,
              left: `${item.boxLeft}`,
              width: `${item.boxWidth}`,
              height: `${item.boxHeight}`,
            }"
            class="select-img"
            v-for="(item, index) in boxs"
            :key="index"
          ></div>

this.boxPoint([[1014,124,153,202],[900,600,153,202],[600,124,153,202]]);
boxPoint(point) {
      const img = new Image();
      img.onload = () => {
        const { width, height } = img;
        this.boxs = point.map((item) => {
          return {
            boxTop: `${(item[1] / height) * 100}%`,
            boxLeft: `${(item[0] / width) * 100}%`,
            boxHeight: `${(item[3] / height) * 100}%`,
            boxWidth: `${(item[2] / width) * 100}%`,
          };
        });
      };
      img.src = this.imgUrl;
    },

Answer 1

【以下回答由 GPT 生成】

我可以使用Vue.js的特性来实现这个功能。具体步骤如下：

1. 使用Vue.js的v-on指令来监听图片加载完成事件，获取图片的宽度和高度。
2. 使用Vue.js的计算属性来动态计算框的位置和大小，使得图片能够在特定大小的框中达到100%的展示效果。

具体代码如下所示：

```javascript
<template>
  <div>
    <img :src="imageUrl" @load="getImageSize">
    <div :style="boxStyle"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path_to_your_image.jpg',
      imgWidth: 0,
      imgHeight: 0,
    };
  },
  computed: {
    boxStyle() {
      const left = (100 - this.imgWidth) / 2;
      const top = (100 - this.imgHeight) / 2;
      return {
        width: `${this.imgWidth}%`,
        height: `${this.imgHeight}%`,
        position: 'absolute',
        top: `${top}%`,
        left: `${left}%`,
      };
    },
  },
  methods: {
    getImageSize(event) {
      this.imgWidth = event.target.width;
      this.imgHeight = event.target.height;
    },
  },
};
</script>

在上面的代码中，我们通过v-on指令监听图片加载完成事件，然后在对应的方法中获取图片的宽度和高度。接着利用计算属性来动态计算框的位置和大小，使得图片能够在特定大小的框中达到100%的展示效果。 ```

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7698338
• 你也可以参考下这篇文章：当高度为100%的时候，如何让文字垂直居中
• 除此之外, 这篇博客: 【收藏】前端开发必备：前端开发不得不收藏的网站,提高200%开发效率！中的 算法 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^