Angular 5(TypeScript)如何在组件中获取图片宽高函数的返回值？

嗨，我来帮你搞定这个问题！你遇到的核心问题其实是**this指向绑定错误和图片加载的异步特性**导致的，咱们一步步来解决：

问题根源分析 #

你之前的JavaScript函数里，大概率是用了普通的function() {}作为图片加载的回调，这会导致回调函数里的this指向的是Image对象本身，而不是你的Angular组件实例，所以没法访问组件里定义的变量。另外，图片加载是异步操作，不能在调用函数后立刻去读取宽高值。

解决方案：绑定正确的this + 处理异步加载 #

下面是完整的组件代码示例，不需要任何额外包，用原生API就能实现：

import { Component } from '@angular/core';

@Component({
  selector: 'app-image-dimensions',
  templateUrl: './image-dimensions.component.html'
})
export class ImageDimensionsComponent {
  // 组件变量，用于存储宽高
  imageWidth: number;
  imageHeight: number;

  getImageDimensions(file: File) {
    // 创建原生Image对象
    const img = new Image();
    
    // 🔴 关键：用箭头函数绑定组件的this，避免指向Image对象
    img.onload = () => {
      // 这里的this就是组件实例了，可以直接赋值给组件变量
      this.imageWidth = img.width;
      this.imageHeight = img.height;
      console.log('宽高已存入组件变量：', this.imageWidth, this.imageHeight);
      // 如果需要在拿到宽高后执行其他逻辑，放在这里就好
    };

    // 处理图片加载失败的情况
    img.onerror = () => {
      console.error('图片加载失败，请检查文件是否有效');
    };

    // 使用FileReader将本地文件转为DataURL，作为图片的src
    const reader = new FileReader();
    reader.onload = (e) => {
      img.src = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  }

  // 示例：处理文件输入的方法（配合模板里的<input type="file">）
  onFileSelected(event: Event) {
    const fileInput = event.target as HTMLInputElement;
    const selectedFile = fileInput.files?.[0];
    if (selectedFile) {
      this.getImageDimensions(selectedFile);
    }
  }
}

进阶：用Promise+Async/Await处理异步逻辑 #

如果需要在拿到宽高后执行更多异步操作，可以把获取宽高的函数改成返回Promise，用async/await来简化代码：

getImageDimensions(file: File): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      const dimensions = { width: img.width, height: img.height };
      this.imageWidth = dimensions.width;
      this.imageHeight = dimensions.height;
      resolve(dimensions);
    };
    img.onerror = () => {
      reject(new Error('图片加载失败'));
    };
    const reader = new FileReader();
    reader.onload = (e) => {
      img.src = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  });
}

// 调用时用async/await
async handleFileSelection(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    try {
      const dimensions = await this.getImageDimensions(file);
      console.log('获取到图片宽高：', dimensions);
      // 这里可以放心执行依赖宽高的逻辑
    } catch (error) {
      console.error('处理图片时出错：', error);
    }
  }
}

核心要点总结 #

• 箭头函数绑定this：避免回调函数里的this指向错误，确保能访问组件的变量
• 异步处理：图片加载是异步的，必须在onload回调或者Promise的resolve中读取宽高值
• 原生API足够用：不需要额外安装包，Image和FileReader就能完成需求

内容的提问来源于stack exchange，提问作者Marie-Hélène Delteil