Ionic中如何将Canvas生成的DataURL转Blob并保存为应用内图片文件

没问题，我来一步步带你搞定这个需求——把Canvas导出的DataURL转换成Blob对象，再保存到Ionic应用的本地文件夹里。这个流程主要分两步：DataURL转Blob和用Ionic的文件插件写入本地。

第一步：将DataURL转换为Blob对象 #

首先我们需要写一个工具函数，把DataURL解析成Blob。DataURL的格式一般是data:image/png;base64,xxxxxx，所以要先去掉前面的标识部分，再解码base64内容。

dataURLtoBlob(dataURL: string): Blob {
  // 拆分DataURL，分离出类型和base64内容
  const parts = dataURL.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uInt8Array = new Uint8Array(rawLength);

  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  // 返回Blob对象
  return new Blob([uInt8Array], { type: contentType });
}

这个函数的逻辑很简单：先拆分出图片的MIME类型，然后把base64字符串解码成二进制数组，最后用这个数组创建Blob对象。

第二步：使用Ionic File插件将Blob保存到应用文件夹 #

接下来需要用Ionic官方的@ionic-native/file插件来操作本地文件，首先得确保你已经安装了这个插件和对应的原生依赖：

1. 安装插件 #

执行以下命令：

# 安装npm包
npm install @ionic-native/file
# 安装原生依赖（针对Cordova项目）
ionic cordova plugin add cordova-plugin-file

2. 编写保存文件的代码 #

先在你的组件或服务中注入File，然后调用它的writeFile方法来保存Blob。这里我们选择把文件存在应用的数据目录（DATA_DIRECTORY），这个目录是应用私有的，不需要额外权限（如果存在DOCUMENTS_DIRECTORY可能需要配置权限）。

import { File } from '@ionic-native/file/ngx';

// 构造函数注入File
constructor(private file: File) {}

async saveBlobToLocal(blob: Blob, fileName: string = 'canvas-image.png') {
  try {
    // 获取应用的数据目录路径
    const directory = this.file.dataDirectory;
    
    // 写入Blob到指定文件
    const result = await this.file.writeFile(directory, fileName, blob, { replace: true });
    
    console.log('文件保存成功！路径：', result.nativeURL);
    return result.nativeURL;
  } catch (error) {
    console.error('保存文件失败：', error);
    throw error;
  }
}

3. 整合两个步骤 #

现在把前面的转Blob和保存逻辑整合起来：

// 假设你已经有了Canvas生成的DataURL
const canvasDataURL = 'data:image/png;base64,xxxxxx...';

// 转成Blob
const imageBlob = this.dataURLtoBlob(canvasDataURL);

// 保存到本地
this.saveBlobToLocal(imageBlob)
  .then(url => {
    // 这里可以做后续操作，比如显示图片或者上传
    console.log('图片已保存到：', url);
  })
  .catch(err => {
    // 处理错误
  });

注意事项 #

• 权限配置：如果选择保存到公共目录（比如DOCUMENTS_DIRECTORY），需要在iOS的info.plist和Android的AndroidManifest.xml中添加对应的文件访问权限。
• 文件覆盖：writeFile方法的第四个参数{ replace: true }表示如果文件已存在就覆盖，如果你不想覆盖，可以改成false，或者先检查文件是否存在。
• MIME类型：确保DataURL的MIME类型和Blob的类型一致，比如如果是JPG图片，类型就是image/jpeg。

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