如何使用 wx.getImageInfo 获取图片信息？

推荐答案

// www.javascriptcn.com code example
wx.getImageInfo({
  src: 'https://example.com/image.jpg',
  success(res) {
    console.log('图片宽度:', res.width);
    console.log('图片高度:', res.height);
    console.log('图片路径:', res.path);
  },
  fail(err) {
    console.error('获取图片信息失败:', err);
  }
});

本题详细解读

1. wx.getImageInfo 的作用

wx.getImageInfo 是微信小程序提供的一个 API，用于获取指定图片的详细信息，包括图片的宽度、高度以及本地路径等。

2. 参数说明

• src: 要获取信息的图片的 URL 地址。
• success: 获取图片信息成功的回调函数，回调参数 res 包含以下属性：
  • width: 图片的宽度（单位：px）。
  • height: 图片的高度（单位：px）。
  • path: 图片的本地路径。
• fail: 获取图片信息失败的回调函数，回调参数 err 包含错误信息。

3. 使用场景

• 当需要获取网络图片的尺寸信息时，可以使用 wx.getImageInfo。
• 在需要根据图片的尺寸进行布局调整或图片裁剪时，这个 API 非常有用。

4. 注意事项

• src 参数必须是有效的图片 URL，否则会触发 fail 回调。
• 由于网络请求的异步性，wx.getImageInfo 是一个异步操作，建议在 success 回调中处理获取到的图片信息。

5. 示例代码解析

• 在示例代码中，我们通过 wx.getImageInfo 获取了一张网络图片的信息。
• 如果获取成功，控制台会输出图片的宽度、高度和本地路径。
• 如果获取失败，控制台会输出错误信息。