如何在Ionic中将Base64字符串图片保存到相册并获取存储路径？

Hey 👋，我之前在Ionic项目里正好实现过这个需求，给你一个简洁的示例，直接就能用：

第一步：安装必要的插件 #

我们需要用@ionic-native/base64-to-gallery插件来处理Base64图片的保存，它能直接把Base64字符串写入系统相册，还能返回图片的本地存储路径。先安装它：

# 安装插件
npm install @ionic-native/base64-to-gallery
# 如果是Capacitor项目，别忘了同步原生代码
npx cap sync

第二步：修改你的组件代码 #

首先在组件里导入并注入这个插件，然后修改现有的takePhotos方法，在保存Base64到数组的同时，调用插件保存到相册并记录路径。

这里我建议把photos数组改成存储包含图片Base64字符串和本地路径的对象，这样后续使用更灵活：

import { Component, OnInit } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Base64ToGallery } from '@ionic-native/base64-to-gallery/ngx';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss'],
})
export class YourComponentPage implements OnInit {
  // 把photos改成对象数组，每个元素存base64和路径
  photos: Array<{ base64: string; path: string }> = [];

  constructor(
    private camera: Camera,
    private base64ToGallery: Base64ToGallery // 注入插件
  ) { }

  ngOnInit() {
    this.photos = [];
  }

  takePhotos() {
    const options: CameraOptions = {
      quality: 30,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
    };

    this.camera.getPicture(options).then((imageData) => {
      const base64Image = 'data:image/jpeg;base64,' + imageData;

      // 调用插件保存到相册
      this.base64ToGallery.save(base64Image, { prefix: 'my_app_', mediaScanner: true })
        .then((path) => {
          console.log('图片保存成功，路径：', path);
          // 把base64和路径一起存入数组（用unshift替代reverse，更直观）
          this.photos.unshift({ base64: base64Image, path: path });
        })
        .catch((err) => {
          console.error('保存图片失败：', err);
        });

    }, (err) => {
      console.error('拍照失败：', err);
    });
  }
}

第三步：配置权限 #

别忘了在原生项目里配置必要的权限，不然保存会失败：

• Android：在android/app/src/main/AndroidManifest.xml中添加读写权限：

  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  

• iOS：在ios/App/App/Info.plist中添加相册访问权限描述：

  <key>NSPhotoLibraryAddUsageDescription</key>
  <string>需要访问你的相册来保存拍摄的图片</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问你的相册来保存拍摄的图片</string>
  

关键说明 #

• base64ToGallery.save()方法的第二个参数是配置项：
  • prefix：可以给保存的图片文件名加前缀，方便区分
  • mediaScanner：设置为true可以让系统相册立刻扫描到新保存的图片
• 保存成功后返回的path就是图片在本地系统的绝对路径，你可以用这个路径做后续的操作（比如上传到服务器、本地预览等）

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