uni-halo/.agents/skills/uniapp-project/examples/api/media/get-image-info.md

uni.getImageInfo - 获取图片信息示例

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/api/media/image.html#getimageinfo

概述

uni.getImageInfo 用于获取图片信息，包括宽度、高度、路径等。

基础用法

uni.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: (res) => {
    console.log('图片宽度', res.width)
    console.log('图片高度', res.height)
  }
})

完整示例

示例 1: 获取网络图片信息

uni.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)
  }
})

示例 2: 获取本地图片信息

// 先选择图片
uni.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0]
    
    // 获取图片信息
    uni.getImageInfo({
      src: tempFilePath,
      success: (imageInfo) => {
        console.log('图片信息', imageInfo)
        // { width: 800, height: 600, path: '...' }
      }
    })
  }
})

示例 3: 在页面中使用

<template>
  <view class="container">
    <button @click="selectAndGetInfo">选择图片并获取信息</button>
    <view v-if="imageInfo" class="info">
      <text>宽度：{{ imageInfo.width }}px</text>
      <text>高度：{{ imageInfo.height }}px</text>
      <image :src="imageInfo.path" mode="aspectFit" class="preview"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageInfo: null
    }
  },
  methods: {
    selectAndGetInfo() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          uni.getImageInfo({
            src: tempFilePath,
            success: (imageInfo) => {
              this.imageInfo = imageInfo
            },
            fail: (err) => {
              uni.showToast({
                title: '获取图片信息失败',
                icon: 'none'
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.info {
  margin-top: 20px;
  padding: 20px;
}
.preview {
  width: 100%;
  max-height: 400px;
  margin-top: 20px;
}
</style>

示例 4: 计算图片宽高比

uni.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: (res) => {
    const aspectRatio = res.width / res.height
    console.log('宽高比', aspectRatio)
    
    // 根据宽高比调整显示
    if (aspectRatio > 1) {
      console.log('横向图片')
    } else {
      console.log('纵向图片')
    }
  }
})

示例 5: 验证图片尺寸

function validateImageSize(imagePath, minWidth, minHeight) {
  return new Promise((resolve, reject) => {
    uni.getImageInfo({
      src: imagePath,
      success: (res) => {
        if (res.width >= minWidth && res.height >= minHeight) {
          resolve(res)
        } else {
          reject(new Error(`图片尺寸不符合要求，需要至少 ${minWidth}x${minHeight}`))
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 使用
validateImageSize('https://example.com/image.jpg', 800, 600)
  .then(info => {
    console.log('图片符合要求', info)
  })
  .catch(err => {
    console.error('验证失败', err)
  })

参数说明

参数名	类型	必填	说明
src	String	是	图片的路径，可以是相对路径、临时文件路径或网络图片路径

返回值

参数名	类型	说明
width	Number	图片宽度，单位 px
height	Number	图片高度，单位 px
path	String	返回图片的本地路径

平台兼容性

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ 小程序	✅
快手小程序	✅
App	✅
快应用	✅

注意事项

1. 网络图片需要配置合法域名
2. 本地图片路径需要使用 /static/ 开头或临时文件路径
3. 获取图片信息是异步操作
4. 可以用于验证图片尺寸、计算宽高比等

参考资源

• 官方文档: https://uniapp.dcloud.net.cn/api/media/image.html#getimageinfo
• 选择图片: https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage