如何将亚马逊S3受保护图片URL或data:application/xml格式base64转为公共图片URL

你获取到的base64内容本质是S3返回的AccessDenied错误XML文档，不是实际的JPEG图片数据，因此修改MIME类型前缀也无法正常显示图片。

• 方案1：直接修改S3对象权限（永久公开） #

  作为S3存储桶的所有者，你可以通过以下两种方式配置公开访问：

  1. 单独配置目标图片的ACL，添加匿名用户的读取权限
  2. 给存储桶配置公共访问策略，示例如下：

  {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::dqedge1/uploads/answers/*"
      }
    ]
  }
  

  配置完成后原S3链接即可直接公共访问。

• 方案2：生成S3预签名URL（临时公开） #

  不需要修改对象权限，可通过AWS SDK生成带有效期的预签名URL，有效期可自定义（最短1分钟，最长7天），URL在有效期内可对外公共访问。以Node.js为例示例代码：

  import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";
  import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
  
  const s3Client = new S3Client({ region: "ap-south-1" });
  const command = new GetObjectCommand({
    Bucket: "dqedge1",
    Key: "uploads/answers/5f47bc0094c80bcd110ad26a/5ec553ceb74af11047f00062/answer/1630903224748.jpeg"
  });
  // 生成有效期为3600秒（1小时）的预签名URL
  const publicUrl = await getSignedUrl(s3Client, command, { expiresIn: 3600 });
  

• 方案3：服务端代理转发 #

  因为你方网站本身可以正常访问该图片，可在你方服务端新增一个代理接口：前端请求该接口时，服务端内部请求S3获取图片资源，再将图片资源返回给前端。该接口可直接对外公开，你也可以自行添加访问控制规则。

• 方案4：前端合法转base64（仅你方网站域内可用） #

  先确保S3存储桶的CORS配置允许你方网站域名跨域访问，之后在你方网站页面内运行以下代码即可得到合法的JPEG格式base64：

  function getImageBase64(url, callback) {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      callback(canvas.toDataURL('image/jpeg', 1.0));
    }
    img.src = url;
  }
  // 调用示例
  getImageBase64('https://dqedge1.s3-ap-south-1.amazonaws.com/uploads/answers/5f47bc0094c80bcd110ad26a/5ec553ceb74af11047f00062/answer/1630903224748.jpeg', (base64) => {
    console.log(base64); // 可直接放入img标签的src属性使用
  })
  

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