uni-app中uni.getImageInfo在苹果13H5页面上无法获取图片信息，返回的是空白的base64位

在uni-app中，uni.getImageInfo 方法用于获取图片信息，但在某些特定环境下（如苹果13的H5页面）可能会遇到无法正确获取图片信息的问题。这通常与浏览器兼容性和权限设置有关。尽管我们不能直接解决环境或权限问题，但可以通过一些替代方案或代码调整来尝试绕过这个问题。

以下是一个使用 FileReader API 的替代方案来获取图片的 Base64 编码，这在H5环境中通常更为可靠。请注意，这种方法需要用户手动选择文件，因此适用于需要用户上传图片的场景。

HTML 部分

<template>
  <view>
    <button type="primary" @click="chooseImage">选择图片</button>
    <image v-if="imageSrc" :src="imageSrc" style="width: 300px; height: auto;"></image>
  </view>
</template>

JavaScript 部分

export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  methods: {
    chooseImage() {
      const self = this;
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      
      input.onchange = function(e) {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = function(event) {
            self.imageSrc = event.target.result; // Base64 编码的图片数据
          };
          reader.readAsDataURL(file);
        }
      };
      
      input.click();
    }
  }
};

说明

1. HTML 部分：创建了一个按钮用于触发文件选择，以及一个 image 标签用于显示选中的图片。
2. JavaScript 部分：
   • 使用 document.createElement('input') 创建一个文件输入元素。
   • 设置 input.type 为 'file' 和 input.accept 为 'image/*' 以限制只选择图片文件。
   • 监听 input 的 onchange 事件，当用户选择文件后，获取文件对象。
   • 使用 FileReader API 读取文件内容，并在读取完成后将 Base64 编码的图片数据赋值给 imageSrc。

这种方法不依赖于 uni.getImageInfo，而是利用浏览器的原生文件处理能力，因此在H5环境中通常更为稳定和可靠。如果你的应用需要在多种平台上运行，并且遇到了特定平台上的问题，考虑使用这种原生HTML5 API作为备选方案。