如何让 HEIC 图像格式在 s3 中工作

Question

我正在处理在 AWS S3 存储桶中保存和显示图像。我使用的是 Mac，图像在 Mac 上显示良好。

我可以将许多图像上传到存储桶，然后可以使用预签名的 URL 显示它们。一切都很好...

但是我还有一些其他不同的图像，例如 .jpg，我在 mac 上看到的很好，并且似乎可以上传，但是不使用预签名 URL 从 s3 显示。当在 Mac Safari、chrome 或 Firefox 中查看时，我收到损坏的图像符号。 Firefox 还说：

图像“https://xxxxxxxxxx”无法显示，因为它包含错误”

有人建议，原始文件创建可能在某种程度上很奇怪，Mac 可能能够解释该图像，但 S3 无法做到这一点可能这可能是跨平台 Windows/Mac/Linux 图像问题？

测试：我拍摄了一张未从 S3 中显示的 .jpg 图像 - 我在 Mac 上以预览形式打开了它，并将其导出为 .然后使用不同的名称。我上传了这个新版本，这似乎解决了问题，因为它现在可以从 s3 正确显示，

但是对于我正在做的事情，我不想导出每个图像并重新保存它 - 为了转到 S3。

问：有人知道为什么我在尝试从 S3 显示图像时遇到一些错误吗？有什么想法可以解决这个问题吗？

- 可能的线索： - 在 Mac 终端中我尝试过：

 file -I ~/Desktop/test.jpg 

令人惊讶的是它返回为 = 图像/heic 即使文件有.jpg 后缀...知道如何让 s3 读取“heic 文件”或者只是让它工作吗？

谢谢戴夫

Answer 1

我也遇到了这个问题。对我来说，当iCloud在iCloud共享文件和iPad或MacOS设备之间的文件时，正在执行一些自动“转换”带来的问题。转换为JPG的转换通常只是将文件扩展名重命名为.jpg而不将文件更改为JPG。非常令人困惑和令人沮丧，对苹果的品牌不是很混乱。

在打击这个“假JPG”问题时，您应该知道一些细微差别。

首先是您需要能够分辨出您的HEIC文件是否具有错误的扩展名。要确定文件的实际类型，您可以使用文件的实际数据而不是扩展名。文件的前几个字节包含文件类型（又称文件的“魔术号”）。

您可以创建一个lambda功能，该功能检查每个已知的魔术号码，但是让Node.js软件包为您处理它要容易得多。我在此代码中使用了file-type-ext npm软件包，我在AWS lambda上托管了该软件包。我将HTTP请求发送给API网关，并使用我要检查的文件的存储键名和键，然后返回实际的文件扩展名（或错误）。

const AWS = require('aws-sdk');
const fileType = require('file-type-ext');

exports.handler = async (event) => {
  const s3 = new AWS.S3();

  // Retrieve the bucket and key from the event
  console.log('event.body:');
  console.log(event.body);
  let payload = JSON.parse(event.body);
  const bucket = payload.bucket; console.log('bucket: ' + bucket );
  const key = payload.key; console.log('key: ' + key );

  try {
    // Retrieve the file from S3
    const params = {
      Bucket: bucket,
      Key: key
    };

    const { Body } = await s3.getObject(params).promise();

    // Determine the file extension based on the magic number
    const fileBuffer = Buffer.from(Body);
    const { ext } = fileType(fileBuffer);

    if (ext) {
      return {
        statusCode: 200,
        body: ext
      };
    } else {
      return {
        statusCode: 500,
        body: 'File extension not found'
      };
    }
  } catch (error) {
    return {
      statusCode: 500,
      body: error.message
    };
  }
};

一旦知道文件的实际类型，我的建议是使用单独的lambda函数将文件转换为JPG。这将使任何现代浏览器都可以阅读。我的问题完全是Heics伪装成JPG，因此我只需要一个功能来应对HEIC转换。我尝试了几个不同的node.js软件包，并最终使用了HEIC-Convert。这是我最终得到的lambda功能。它摄取了一个命名较差的HEIC文件，将其转换为JPG，然后将其保存为随机命名的JPG，并将其保存在同一桶中。

const { promisify } = require('util');
const fs = require('fs');
const convert = require('heic-convert');
const axios = require('axios');
const AWS = require('aws-sdk');
var payload = {};
var fileURL;
const BUCKET = process.env.BUCKET;

const s3 = new AWS.S3();

exports.handler = async (event, context) => {
  
  console.log('Event recieved.');
  console.log(event.body);
  payload = JSON.parse(event.body);
  fileURL = payload.URL;
  console.log('fileURL: ' + fileURL );
  
  try {
    const response = await axios.get(fileURL, {
      responseType: 'arraybuffer',
    });
    console.log('File downloaded successfully.', response.data);

    const inputBuffer = Buffer.from(response.data, 'binary');

    const outputBuffer = await convert({
      buffer: inputBuffer,
      format: 'JPEG',
      quality: 1,
    });
    console.log('File converted successfully.', outputBuffer);

    let rando = generateRandomString(16);

    const s3Params = {
      Bucket: BUCKET,
      Key: rando + '.jpg',
      Body: outputBuffer,
      ACL: 'public-read',
      ContentType: 'image/jpg'
    };

    const uploadResult = await s3.upload(s3Params).promise();
    console.log('File uploaded successfully:', uploadResult.Location);

    return {
      statusCode: 200,
      body: JSON.stringify({message: 'Conversion and upload completed successfully.', jpgLocation:  uploadResult.Location})
    };
  } catch (error) {
    console.error('Error converting HEIC to JPG:', error);
    return {
      statusCode: 500,
      body: 'An error occurred during conversion and upload.',
    };
  }
};


function generateRandomString(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length);
    result += characters.charAt(randomIndex);
  }

  return result;
}

当您设置Lambda功能时，请不要忘记，您必须给他们IAM权限才能读/编写相关的S3存储桶。您还需要调整功能的可用执行时间和内存津贴，并为任何敏感数据（例如您的存储键名）设置环境变量。