如何用JavaScript的navigator.share()分享Buffer中的图片？

数据老陈

2026-8-5

要将Buffer格式（长字符串，通常为base64编码）的图片转为可被navigator.share()识别的File对象，核心是把base64字符串转成Blob，再封装成File，具体实现步骤如下：

核心步骤

剥离base64字符串的前缀（如data:image/png;base64,），仅保留纯编码部分
将纯base64编码转换为Uint8Array格式的二进制数据
基于二进制数据创建Blob对象，指定对应图片的MIME类型（如image/png、image/jpeg）
将Blob转为File对象，设置自定义文件名
调用navigator.share()，传入包含该File的数组

完整代码示例

// 示例：你的Buffer格式图片（带base64前缀）
const bufferBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==";

// 1. 剥离base64前缀并提取MIME类型
const [prefix, encoded] = bufferBase64.split(",");
const mimeType = prefix.match(/:(.*?);/)[1];

// 2. 将base64转为Uint8Array二进制数据
const byteCharacters = atob(encoded);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);

// 3. 创建Blob对象
const blob = new Blob([byteArray], { type: mimeType });

// 4. 转为File对象
const imageFile = new File([blob], "shared-image.png", { type: mimeType });

// 5. 调用分享API
if (navigator.share) {
  navigator.share({
    title: "分享图片",
    files: [imageFile]
  })
  .then(() => console.log("分享成功"))
  .catch((error) => console.log("分享失败:", error));
} else {
  console.log("当前环境不支持分享API");
}