# uni.getImageInfo(options)

获取图片信息

# getImageInfo 兼容性

Web 微信小程序 Android iOS HarmonyOS
4.0 4.41 4.18 4.25 4.61

# 参数

名称 类型 必填 默认值 兼容性 描述
options GetImageInfoOptions -
-
名称 类型 必备 默认值 兼容性 描述
src string.ImageURIString -
图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径
success (callback: GetImageInfoSuccess) => void -
接口调用成功的回调函数
fail (callback: GetImageInfoFail) => void -
接口调用失败的回调函数
complete (callback: any) => void -
接口调用结束的回调函数(调用成功、失败都会执行)

# GetImageInfoSuccess 的属性值

名称 类型 必备 默认值 兼容性 描述
width number -
图片宽度,单位px
height number -
图片高度,单位px
path string -
返回图片的本地路径
orientation string -
返回图片的方向
合法值 兼容性 描述
up
-
-
down
-
-
left
-
-
right
-
-
up-mirrored
-
-
down-mirrored
-
-
left-mirrored
-
-
right-mirrored
-
-
type string -
返回图片的格式

# GetImageInfoFail 的属性值

名称 类型 必备 默认值 兼容性 描述
errCode number -
-
错误码
合法值 兼容性 描述
1101001
-
用户取消
1101002
-
urls至少包含一张图片地址
1101003
-
文件不存在
1101004
-
图片加载失败
1101005
-
未获取权限
1101006
-
图片或视频保存失败
1101007
-
图片裁剪失败
1101008
-
拍照或录像失败
1101009
-
图片压缩失败
1101010
-
其他错误
errSubject string -
-
统一错误主题(模块)名称
data any -
-
错误信息中包含的数据
cause Error -
-
源错误信息,可以包含多个错误,详见SourceError
errMsg string -
-

# 参见

# 示例

示例为hello uni-app x alpha分支,与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

扫码体验(手机浏览器跳转到App直达页)

示例

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-title">
        <text class="uni-subtitle-text">获取本地相对路径图片信息</text>
      </view>
      <image class="image" :src="relativeImagePath" mode="aspectFit"></image>
      <text class="margin-top-10">{{absoluteImageInfo}}</text>
      <view class="uni-title">
        <text class="uni-subtitle-text">获取网络路径图片信息</text>
      </view>
      <image class="image" :src="remoteImagePath" mode="aspectFit"></image>
      <text class="margin-top-10">{{remoteImageInfo}}</text>
      <view class="uni-title">
        <text class="uni-subtitle-text">获取本地绝对路径图片信息</text>
      </view>
      <image class="image" :src="absoluteImagePath" mode="aspectFit"></image>
      <text class="margin-top-10">{{relativeImageInfo}}</text>
      <view class="uni-btn-v">
        <button type="primary" @click="chooseImage">拍摄照片或从相册中选择照片</button>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        title: "getImageInfo",
        relativeImagePath: "/static/test-image/logo.png",
        relativeImageInfo: "",
        absoluteImagePath: "",
        absoluteImageInfo: "",
        remoteImagePath: "https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/img/building.jpg",
        remoteImageInfo: "",
        // 自动化测试
        imageInfoForTest: null as UTSJSONObject | null,
      }
    },
    methods: {
      chooseImage() {
        uni.chooseImage({
          count: 1,
          success: (res) => {
            this.absoluteImagePath = res.tempFilePaths[0];
            uni.getImageInfo({
              src: res.tempFilePaths[0],
              success: (_res) => {
                console.log("getImageInfo success", JSON.stringify(_res));
                this.relativeImageInfo = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n图片路径: ${_res.path}\n图片方向: ${_res.orientation}\n图片格式: ${_res.type}`;
              },
              fail: (err) => {
                uni.showModal({
                  title: "获取图片信息失败",
                  content: JSON.stringify(err),
                  showCancel: false
                });
              }
            });
          }
        });
      }
    },
    onReady() {
      uni.getImageInfo({
        src: this.relativeImagePath,
        success: (res) => {
          console.log("getImageInfo success", JSON.stringify(res));
          this.absoluteImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
          this.imageInfoForTest = {
            "width": res.width,
            "height": res.height,
            "path": res.path.slice(res.path.indexOf('static/') + 'static/'.length),
            "orientation": res.orientation,
            "type": res.type
          };
        },
        fail: (err) => {
          uni.showModal({
            title: "获取图片信息失败",
            content: JSON.stringify(err),
            showCancel: false
          });
          this.imageInfoForTest = null;
        }
      });
      uni.getImageInfo({
        src: this.remoteImagePath,
        success: (res) => {
          console.log("getImageInfo success", JSON.stringify(res));
          this.remoteImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
        },
        fail: (err) => {
          uni.showModal({
            title: "获取图片信息失败",
            content: JSON.stringify(err),
            showCancel: false
          });
        }
      });
    }
  }
</script>

<style>
  .image {
    align-self: center;
  }

  .margin-top-10 {
    margin-top: 10px;
  }
</style>

# 通用类型

# GeneralCallbackResult

名称 类型 必备 默认值 兼容性 描述
errMsg string -
错误信息