Capacitor SendIntent接收图片后创建JavaScript File对象问题

你的核心问题是错误地直接将base64字符串的字符编码转为二进制数据，导致生成的File对象内容无效，无法被识别为图片。以下是正确的解决方法和完整代码示例：

问题分析 #

你当前代码中，直接遍历base64字符串取charCodeAt得到的是base64编码字符本身的ASCII值，而非原始图片的二进制数据。这会导致生成的Blob/File虽然名称、大小匹配，但内容是错误的，自然无法正常显示。

正确实现步骤 #

1. 用atob()解码base64字符串，得到原始二进制字符串
2. 将二进制字符串转为Uint8Array格式的二进制数据
3. 基于二进制数据生成Blob，再创建File对象
4. 若需在视图中显示，可将File转为Data URL或直接使用本地URI

完整代码示例 #

import { Filesystem } from '@capacitor/filesystem';

async function processSharedImage(resultUrl, shareObject) {
  // 读取插件返回路径对应的base64图片数据
  const { data } = await Filesystem.readFile({ path: resultUrl });
  
  // 正确解码base64字符串
  const decodedBinaryStr = atob(data);
  const arrayBuffer = new ArrayBuffer(decodedBinaryStr.length);
  const uint8Array = new Uint8Array(arrayBuffer);

  // 将二进制字符串转为Uint8Array
  for (let i = 0; i < decodedBinaryStr.length; i++) {
    uint8Array[i] = decodedBinaryStr.charCodeAt(i);
  }

  // 生成Blob与File对象
  const blob = new Blob([uint8Array], { type: shareObject.type });
  const sharedFile = new File([blob], resultUrl.split('/').pop(), { type: blob.type });

  // 转为可直接在视图中显示的Data URL
  const displayUrl = URL.createObjectURL(sharedFile);
  // 示例：赋值给img标签
  // document.getElementById('shared-img').src = displayUrl;

  return sharedFile;
}

简化替代方案 #

如果不需要生成File对象，仅需显示图片，可直接通过Filesystem获取本地URI，跳过转Blob的步骤：

const { uri } = await Filesystem.getUri({ path: resultUrl });
// uri可直接作为img标签的src属性值（格式通常为content://或file://）

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