【鸿蒙根据图片路径读取图片的base64数据】

鸿蒙根据图片路径读取图片的base64数据

一、前言：

在鸿蒙ETS（Extended TypeScript）中，你可以使用@ohos.file.fs和@ohos.util.base64模块来读取图片文件并转换为base64数据。以下是完整的实现方法：

二、使用方法

方法一：使用文件系统API读取图片

c 复制代码

import fs from '@ohos.file.fs';
import base64 from '@ohos.util.base64';

// 读取图片文件并转换为base64
async function imageToBase64(imagePath: string): Promise<string> {
  try {
    // 1. 打开文件
    let file = fs.openSync(imagePath, fs.OpenMode.READ_ONLY);
    
    // 2. 获取文件信息
    let stat = fs.statSync(imagePath);
    
    // 3. 读取文件内容到ArrayBuffer
    let arrayBuffer = new ArrayBuffer(stat.size);
    fs.readSync(file.fd, arrayBuffer);
    
    // 4. 关闭文件
    fs.closeSync(file);
    
    // 5. 将ArrayBuffer转换为base64
    let unit8Array = new Uint8Array(arrayBuffer);
    let base64Str = base64.encodeToStringSync(unit8Array);
    
    return base64Str;
  } catch (error) {
    console.error('读取图片失败:', error);
    throw error;
  }
}

// 使用示例
async function example() {
  try {
    // 图片路径示例（根据实际路径调整）
    const imagePath = 'entry/src/main/resources/base/media/image.png';
    
    const base64Data = await imageToBase64(imagePath);
    console.log('Base64数据:', base64Data.substring(0, 100) + '...');
    
    // 如果需要data URL格式
    const dataUrl = `data:image/png;base64,${base64Data}`;
    console.log('Data URL:', dataUrl.substring(0, 100) + '...');
    
    return base64Data;
  } catch (error) {
    console.error('处理图片失败:', error);
  }
}

方法二：使用资源管理器读取资源图片

如果你要读取应用内的资源图片，可以使用以下方法：

c 复制代码

import resourceManager from '@ohos.resourceManager';
import base64 from '@ohos.util.base64';

async function resourceImageToBase64(resourceId: number): Promise<string> {
  try {
    // 获取资源管理器
    const context = getContext(this) as common.UIAbilityContext;
    const resourceMgr = context.resourceManager;
    
    // 读取资源文件的ArrayBuffer
    const arrayBuffer = await resourceMgr.getMediaContent(resourceId);
    
    // 转换为base64
    const unit8Array = new Uint8Array(arrayBuffer);
    const base64Str = base64.encodeToStringSync(unit8Array);
    
    return base64Str;
  } catch (error) {
    console.error('读取资源图片失败:', error);
    throw error;
  }
}

方法三：完整的工具类

c 复制代码

import fs from '@ohos.file.fs';
import base64 from '@ohos.util.base64';

export class ImageBase64Util {
  /**
   * 将图片文件转换为base64字符串
   * @param imagePath 图片文件路径
   * @returns base64字符串
   */
  static async imageToBase64(imagePath: string): Promise<string> {
    try {
      // 检查文件是否存在
      if (!fs.accessSync(imagePath)) {
        throw new Error('文件不存在: ' + imagePath);
      }
      
      let file = fs.openSync(imagePath, fs.OpenMode.READ_ONLY);
      let stat = fs.statSync(imagePath);
      
      let arrayBuffer = new ArrayBuffer(stat.size);
      let readLen = fs.readSync(file.fd, arrayBuffer);
      
      fs.closeSync(file);
      
      if (readLen !== stat.size) {
        throw new Error('文件读取不完整');
      }
      
      let unit8Array = new Uint8Array(arrayBuffer);
      return base64.encodeToStringSync(unit8Array);
    } catch (error) {
      console.error('图片转base64失败:', error);
      throw error;
    }
  }
  
  /**
   * 将base64字符串转换为Data URL
   * @param base64Str base64字符串
   * @param mimeType 图片类型，默认image/png
   * @returns Data URL
   */
  static base64ToDataUrl(base64Str: string, mimeType: string = 'image/png'): string {
    return `data:${mimeType};base64,${base64Str}`;
  }
  
  /**
   * 获取图片的MIME类型
   * @param imagePath 图片路径
   * @returns MIME类型
   */
  static getImageMimeType(imagePath: string): string {
    const ext = imagePath.split('.').pop()?.toLowerCase();
    const mimeMap: { [key: string]: string } = {
      'png': 'image/png',
      'jpg': 'image/jpeg',
      'jpeg': 'image/jpeg',
      'gif': 'image/gif',
      'webp': 'image/webp',
      'bmp': 'image/bmp'
    };
    return mimeMap[ext || ''] || 'image/png';
  }
}

// 使用示例
async function demo() {
  try {
    const imagePath = '你的图片路径';
    
    // 转换为base64
    const base64Data = await ImageBase64Util.imageToBase64(imagePath);
    
    // 获取MIME类型
    const mimeType = ImageBase64Util.getImageMimeType(imagePath);
    
    // 生成Data URL
    const dataUrl = ImageBase64Util.base64ToDataUrl(base64Data, mimeType);
    
    console.log('Base64长度:', base64Data.length);
    console.log('Data URL前缀:', dataUrl.substring(0, 50));
    
    return dataUrl;
  } catch (error) {
    console.error('示例执行失败:', error);
  }
}

三、注意事项

1.权限配置：

如果读取外部存储的图片，需要在 module.json5中添加文件权限：

c 复制代码

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_MEDIA"
      }
    ]
  }
}

2.路径说明：

应用资源路径：entry/src/main/resources/base/media/
应用文件路径：使用@ohos.file.filesystem获取
性能考虑：大图片转换为base64可能会占用较多内存，建议在需要时进行转换。
错误处理：确保添加适当的错误处理，特别是文件不存在或读取失败的情况。