鸿蒙Next开发之-保存base64图片到本地沙盒

前言

目前公司和华为达成了合作，计划在鸿蒙正式发布next版本之前，上架公司APP的鸿蒙版本。方便用户升级手机到鸿蒙next之后，能正常使用公司APP，保证用户的既得利益。

目前公司的项目大体架构如下：

整个APP使用的是跨平台解决方案：Flutter、Game（Unity&Cocos）、H5

跨平台通过Bridge SDK调用原生底座能力。

开发环境

• Mac
• DevEco Studio NEXT Developer Preview2
• HarmonyOS next Developer Preview2

这篇文章浅谈一下，在鸿蒙next上，如何实现将base64字符串的图片保存到原生设备上。

Base64认知

什么是Base64

Base64 是一种基于64个 ASCII 字符来表示二进制数据的表示方法，这个64个不同的字符为：

• 大、小写字母（A-- Z、a--z）。52个
• 数字。（0--9）10个
• 两个特殊字符。（+、/）2个

参考：en.wikipedia.org/wiki/Base64...

Base64原理

1. 将图片转换成二进制数据。
2. 将8比特位为一个单元的字节数据拆分为以6个比特位为一个单元的字节数据。
3. 将6个比特位为一个单元高位补齐00,补足8个比特。
4. 如果剩余的字节不足6位，则先低位补00凑齐6位之后，高位再补00，补足8位。
5. 当未编码（1中的二进制数据）输入的长度不是三的倍数时，则编码输出（3）必须添加填充，使其长度为四的倍数。填充字符为=
6. 将补齐8个比特的二进制数据，转化为10进制数据。然后到上面的base64码表中进行查询，并生成字符。
7. 将所有的字符进行拼接组成base64字符串。

举例说明

比如字符串："byhk"

1. 将其转换为二进制数据：01100010、01111001、01101000、01101011
2. 将8比特拆为6比特：011000，100111，100101，101000，011010，11
3. 高位补齐00，补足8个比特：0011000，0100111，00100101，00101000，00011010，00110000,
4. 最后的11不满6位，先低位补0000变为：110000，然后高位补00，变为：00110000
5. 步骤3，最后的数量不是4的倍数，因此需要填充两个=
6. 因此"byhk"的base64的结果为："Ynloaw=="

鸿蒙base64图片保存到本地沙盒

认识图片base64格式

data:image/png;base64,iVBORw0KGg....

1、解析图片数据

private static dealBase64Str(base64Data: string): string {
  let imageData: string
  if (base64Data.startsWith("data")) {
    const base64Split: string[] = base64Data.split(",")
    if (base64Split.length !== 2) {
      throw new Error(`Illegal base64 data`)
    }
    imageData = base64Split[1].trim()
  } else {
    imageData = base64Data
  }
  return imageData
}

2、创建沙盒文件

private static createFile(context: Context) {
  let pathDir = context.filesDir
  let fileName = systemDateTime.getTime(true)
  let filePath = `${pathDir}/${fileName}.jpg`
  let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
  return file
}

3、将图片数据写入

let bufferImage = buffer.from(base64Result, 'base64')
await fs.write(file.fd, bufferImage.buffer)
fs.closeSync(file.fd)

完整代码

export class ImageUtils {
  static async saveBase64Image(base64ImageData: string, context: Context): Promise<Boolean> {
    try {
      let base64Result = ImageUtils.dealBase64Str(base64ImageData)
      let file = ImageUtils.createFile(context)
      let bufferImage = buffer.from(base64Result, 'base64')
      await fs.write(file.fd, bufferImage.buffer)
      fs.closeSync(file.fd)
      return Promise.resolve(true)
    } catch (e) {
      throw new Error(e)
    }
  }

  private static dealBase64Str(base64Data: string): string {
    let imageData: string
    if (base64Data.startsWith("data")) {
      const base64Split: string[] = base64Data.split(",")
      if (base64Split.length !== 2) {
        throw new Error(`ImageUtils: Illegal base64 data`)
      }
      imageData = base64Split[1].trim()
    } else {
      imageData = base64Data
    }
    return imageData
  }

  private static createFile(context: Context) {
    let pathDir = context.filesDir
    let fileName = systemDateTime.getTime(true)
    let filePath = `${pathDir}/${fileName}.jpg`
    let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
    return file
  }
}