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

最新推荐文章于 2025-03-31 18:11:09 发布

小陈乱敲代码

最新推荐文章于 2025-03-31 18:11:09 发布

阅读量2.5k

点赞数 24

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/zzz777qqq/article/details/137971983

版权

前言

目前公司和华为达成了合作，计划在鸿蒙正式发布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个

在这里插入图片描述

Base64原理

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

举例说明

比如字符串：“byhk”

将其转换为二进制数据：01100010、01111001、01101000、01101011
将8比特拆为6比特：011000，100111，100101，101000，011010，11
高位补齐00，补足8个比特：0011000，0100111，00100101，00101000，00011010，00110000,
最后的11不满6位，先低位补0000变为：110000，然后高位补00，变为：00110000
步骤3，最后的数量不是4的倍数，因此需要填充两个=
因此"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
  }
}

怎样学习鸿蒙？

首先必学的是开发语言 ArkTS，这是重中之重，然后就是ArkUI声明式UI开发、Stage模型、网络/数据库管理、分布式应用开发、进程间通信与线程间通信技术、OpenHarmony多媒体技术……。中间还有许多的知识点，都整理成思维导图来分享给大家~
在这里插入图片描述
此外，小编精心准备了一份联合鸿蒙官方发布笔记整理收纳的《鸿蒙开发学习笔记》，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。