如何用JS获取HEIC图片GPS坐标？移动端异常问题求助

一、前端移动端HEIC转码丢失EXIF的解决 #

移动端浏览器（尤其是iOS Safari）会自动将HEIC格式转为JPEG后提供给前端，导致包含GPS的原始EXIF数据丢失。你需要调整代码，确保拿到原始HEIC文件数据：

1. 修改input标签属性
   给文件选择框添加明确的格式指定，减少浏览器自动转码的触发：

<input type="file" id="imageInput" accept="image/heic,image/heif,image/jpeg" />

2. 优化文件读取逻辑
   直接读取原始Blob数据，替代依赖浏览器处理的FileReader：

const imageInput = document.getElementById('imageInput');
imageInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  let fileExtension = file.name.toLowerCase().split('.').pop();
  let tags;

  try {
    // 直接读取原始文件的ArrayBuffer，避免浏览器转码干预
    const arrayBuffer = await file.arrayBuffer();
    tags = (fileExtension === "heic" || fileExtension === "heif") 
      ? findEXIFinHEIC(arrayBuffer) 
      : findEXIFinJPEG(arrayBuffer);

    // 将度分秒格式的GPS转为Leaflet可用的十进制坐标
    const lat = parseGPS(tags.GPSLatitude, tags.GPSLatitudeRef);
    const lng = parseGPS(tags.GPSLongitude, tags.GPSLongitudeRef);
    console.log(`GPS坐标：${lat}, ${lng}`);
  } catch (err) {
    console.error('解析EXIF失败：', err);
  }
});

// 辅助函数：度分秒转十进制
function parseGPS(components, ref) {
  if (!components || !ref) return null;
  const decimal = components[0] + (components[1]/60) + (components[2]/3600);
  return (ref === 'S' || ref === 'W') ? -decimal : decimal;
}

二、WordPress上传HEIC丢元数据的解决 #

WordPress默认会自动转码HEIC为JPEG并丢弃原始EXIF，需要以下调整：

1. 添加HEIC/HEIF的MIME类型支持
   在主题的functions.php中添加代码，让WordPress识别HEIC格式：

function add_heic_mime_types($mime_types) {
  $mime_types['heic'] = 'image/heic';
  $mime_types['heif'] = 'image/heif';
  return $mime_types;
}
add_filter('upload_mimes', 'add_heic_mime_types');

2. 禁用自动图像转码
   WordPress 5.9+默认会对HEIC自动转码，需要禁用该功能：

function disable_heic_conversion($enable, $mime_type) {
  if ($mime_type === 'image/heic' || $mime_type === 'image/heif') {
    return false;
  }
  return $enable;
}
add_filter('wp_image_file_mime_type', 'disable_heic_conversion', 10, 2);

add_filter('wp_handle_upload_prefilter', function($file) {
  if (in_array($file['type'], ['image/heic', 'image/heif'])) {
    add_filter('wp_get_image_mime', function($mime) use ($file) {
      return $file['type'];
    });
  }
  return $file;
});

3. 强制保留EXIF元数据
   确保WordPress处理图片时保留EXIF信息，在functions.php中添加：

function preserve_image_exif($metadata, $attachment_id) {
  $file = get_attached_file($attachment_id);
  if (file_exists($file)) {
    $exif = exif_read_data($file);
    if ($exif) {
      $metadata['exif'] = $exif;
    }
  }
  return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'preserve_image_exif', 10, 2);

三、额外调试建议 #

• 移动端测试时，用浏览器开发者工具查看file对象的type属性，确认是否为image/heic而非image/jpeg，如果是后者可尝试Chrome for iOS等第三方浏览器测试。
• 上传到WordPress后，直接查看服务器上的原始文件，确认HEIC文件是否被保留，而非仅生成JPEG副本。
• 测试用未经过压缩或编辑的原始iPhone HEIC图片，避免第三方APP修改或删除了EXIF数据。

内容的提问来源于stack exchange，提问作者briandev