元素
元素
工具
博客
问答

Capacitor相机插件拍照后如何保存到本地并显示缩略图？

皇甫鉴恒 阅读 55
移动

在用Capacitor的Camera插件拍照后，想把照片保存到本地并显示缩略图。按照文档调用Camera.getPhoto()时设置resultType: 'dataURL'，但保存到Filesystem后图片显示不完整，缩略图显示的是灰色方块。尝试过把resultType改为'dataUrl'和'base64'都无效，控制台报Invalid URI"错误，该怎么处理？

这是我的代码片段：


const image = await Camera.getPhoto({
  quality: 100,
  allowEditing: true,
  resultType: 'dataURL',
  source: 'camera'
});

// 保存到本地的代码
await Filesystem.writeFile({
  path: 'photo.jpg',
  data: image.dataUrl,
  directory: FilesystemDirectory.Data
});

查看文件路径时发现图片大小异常小（只有几百字节），感觉没保存完整。是不是需要调整图片格式或者编码方式？之前用Cordova时直接用URI就能显示，Capacitor的处理流程是不是有不同步骤？

我来解答 赞 2 收藏
二维码
手机扫码查看
反馈
2 条解答
端木英洁
端木英洁 Lv1
你遇到的问题是典型的resultType和数据字段不匹配导致的。首先'Capacitor Camera插件要求resultType写成'dataUrl'而不是'dataURL'，大小写必须一致。但更关键的是，当resultType设为'dataUrl'时，返回的数据在image对象里是dataUrl属性，而Filesystem.writeFile需要的是纯base64字符串，不能直接传dataUrl。

建议改成用resultType: 'base64'，这样拿到的就是干净的base64编码，可以直接写入文件系统。另外缩略图显示灰色方块通常是因为img标签里的src格式不对，dataUrl包含前缀如"data:image/jpeg;base64,"，这个要保留才能正确解析。

正确的做法如下：

const image = await Camera.getPhoto({

  quality: 100,

  allowEditing: true,

  resultType: 'base64',

  source: CameraSource.Camera

});



// 把base64数据写入文件

const savedFile = await Filesystem.writeFile({

  path: 'photo.jpg',

  data: image.base64String!,

  directory: FilesystemDirectory.Data

});



// 获取可访问的路径用于显示缩略图

const filePath = Capacitor.convertFileSrc(savedFile.uri);

document.getElementById('thumbnail')!.setAttribute('src', filePath);


注意这里要用Capacitor.convertFileSrc处理文件路径，否则WebView无法加载本地文件。之前Cordova用URI直连的方式在Capacitor里行不通了，安全沙盒机制变了。

如果一定要用dataUrl，那记得从image.dataUrl取值，并确保传给writeFile时去掉前面的"data:image/jpeg;base64,"再拼回去，不然会当成普通字符串处理。不过还是推荐走base64路线，稳定得多。
点赞 3
2026-02-10 10:19
A. 林莹
A. 林莹 Lv1
resultType用uri，别用dataURL。保存的时候用Filesystem.write方法，路径用image.path就行。缩略图用img标签直接显示uri，别转base64。就这样。
点赞 7
2026-02-07 15:01
相关推荐
元素
元素
工具
博客
问答
登录/注册