HarmonyOS鸿蒙Next中如何实现Base64数据转图片

HarmonyOS鸿蒙Next中如何实现Base64数据转图片 遇到一个问题，不知道Base64 String数据该调用哪个API解码，以及解码后，调用哪个API转成图片显示 验证码场景，从后台获取验证码图片的Base64数据，在客户端解码并显示。

3 回复

使用 @ohos.util (util 工具函数) 模块的 Base64Helper 进行 base64 解码，获取 Uint8Array 对象

  1. 使用 @ohos.buffer (Buffer) 模块的 buffer.from(uint8Array.buffer).toString() 将 Uint8Array 对象转为图片 base64 数据

  2. 图片 base64 数据可以直接使用 Image() 组件显示，格式为 data:image/png|jpeg|bmp|webp;base64,[base64 data]，其中 [base64 data] 为 Base64 字符串数据

请问能否提供一下 imgFlow，imgFlow 是图片直接转成 base64 的数据吗？

请问您提供的 imgFlow 的数据是否就是图片 base64 编码后的数据，是否还进行了其他处理。当前使用图片直接转换的 base64 数据，经下述 demo 可以直接展示。

import { buffer, util } from '@kit.ArkTS';
@Entry
@Component
struct Index {
  @State imageData: string = '';
  private imgFlow = '';

  aboutToAppear(): void {
    this.imageData = buffer.from(new util.Base64Helper().decodeSync(this.imgFlow, util.Type.BASIC)).toString()
  }

  build() {
    Row() {
      Column({ space: 12 }) {
        Image(this.imageData).width(40).height(40)
      }
      .width('100%')
    }
    .height('100%')
  }
}

imgFlow 分两段，需要拼接一下：

imgFlow = 'ZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFDa0FBQUFwQ0FZQUFBQ29ZQUQyQUFBQUdYUkZXSFJUYjJaMGQyRnlaUUJCWkc5aVpTQkpiV0ZuWlZKbFlXUjVjY2xsUEFBQUF5VnBWRmgwV0UxTU9tTnZiUzVoWkc5aVpTNTRiWEFBQUFBQUFEdy9lSEJoWTJ0bGRDQmlaV2RwYmowaTc3dS9JaUJwWkQwaVZ6Vk5NRTF3UTJWb2FVaDZjbVZUZWs1VVkzcHJZemxrSWo4K0lEeDRPbmh0Y0cxbGRHRWdlRzFzYm5NNmVEMGlZV1J2WW1VNmJuTTZiV1YwWVM4aUlIZzZlRzF3ZEdzOUlrRmtiMkpsSUZoTlVDQkRiM0psSURZdU1DMWpNREEySURjNUxqRTJORGMxTXl3Z01qQXlNUzh3TWk4eE5TMHhNVG8xTWpveE15QWdJQ0FnSUNBZ0lqNGdQSEprWmpwU1JFWWdlRzFzYm5NNmNtUm1QU0pvZEhSd09pOHZkM2QzTG5jekxtOXlaeTh4T1RrNUx6QXlMekl5TFhKa1ppMXplVzUwWVhndGJuTWpJajRnUEhKa1pqcEVaWE5qY21sd2RHbHZiaUJ5WkdZNllXSnZkWFE5SWlJZ2VHMXNibk02ZUcxd1BTSm9kSFJ3T2k4dmJuTXVZV1J2WW1VdVkyOXRMM2hoY0M4eExqQXZJaUI0Yld4dWN6cDRiWEJOVFQwaWFIUjBjRG92TDI1ekxtRmtiMkpsTG1OdmJTOTRZWEF2TVM0d0wyMXRMeUlnZUcxc2JuTTZjM1JTWldZOUltaDBkSEE2THk5dWN5NWhaRzlpWlM1amIyMHZlR0Z3THpFdU1DOXpWSGx3WlM5U1pYTnZkWEpqWlZKbFppTWlJSGh0Y0RwRGNtVmhkRzl5Vkc5dmJEMGlRV1J2WW1VZ1VHaHZkRzl6YUc5d0lESXlMak1nS0UxaFkybHVkRzl6YUNraUlIaHRjRTFOT2tsdWMzUmhibU5sU1VROUluaHRjQzVwYVdRNk9EUXhNRUl6TjBReVJqUTFNVEZGUlVKRk5VTkZSVEF3UmpCQ1FUZzBOa1lpSUhodGNFMU5Pa1J2WTNWdFpXNTBTVVE5SW5odGNDNWthV1E2T0RReE1FSXpOMFV5UmpRMU1URkZSVUpGTlVORlJUQXdSakJDUVRnME5rWWlQaUE4ZUcxd1RVMDZSR1Z5YVhabFpFWnliMjBnYzNSU1pXWTZhVzV6ZEdGdVkyVkpSRDBpZUcxd0xtbHBaRG80TkRFd1FqTTNRakpHTkRVeE1VVkZRa1UxUTBWRk1EQkdNRUpCT0RRMlJpSWdjM1JTWldZNlpHOWpkVzFsYm5SSlJEMGllRzF3TG1ScFpEbzROREV3UWpNM1F6SkdORFV4TVVWRlFrVTFRMFZGTURCR01FSkJPRFEyUmlJdlBpQThMM0prWmpwRVpYTmpjbWx3ZEdsdmJqNGdQQzl5WkdZNlVrUkdQaUE4TDNnNmVHMXdiV1YwWVQ0Z1BEOTRjR0ZqYTJWMElHVnVaRDBpY2lJL1BqbmFVSHNBQUFScVNVUkJWSGphekZsTmJGVkZGUDd1N1h1bDRjZVl0a0FOQkNVWUZrUUN0dFVGQzhXa3BJS0VnTXFxdFpnSUxtUlRNTEl3d1pnWVdXQ3NiR1JUU1VpMUt5VDhwQW9HRTRrTE4yMEtwbUlDSVdrMUVtZ3BCRnRMc0svdDlUc3owK2E
5MTl1WmVUL0ZkNUtaYysrOG1lOThNMi9tbkRQdkJmZzRnaEtqRUpqbkNOdFo3MkNwNWZOcTZnU0tMeE8wMTAvZHkzS2V6MTB6OXFlNUtKVk5FdGlNS1J5bGZnR1BYN29SNGhEMTVYU1NZVWFYQ0FkSjhLZi9pU0NVWGJFdlBOSWtuV1FyUC93Y3BTQ2FSMnNteVFqMW5NRVhLQ1VSUHNKcmh1UVVPbEdLWW5pRlpOdEF2VGJIcnlQOW9NM2ZHT0ZGZmdsV0xjNnVnU21qTEdNc1phWjlrbVVSeTJKa2U0aVprNGwvNWhpenhKTTQrWW52cTNNU25HQVpCcXBXQVcrOEREei9sRzYrZWdjNC9SdHdkNEF2MVN4SjlSWHBUWlRTWTVZK3d6R2JnWTAxbXMrVjJ4elRCOXo3MDR4Sk9JaEdxQXR3T0xySHg4bzVDY3JNN3dMdmJBSGE2TjZmcU1qc01qWU9IUG9PT1A0RFg2cU1VWmtVVWQ5ckJJNit4b1Vyenh3ejhnZzQyQVdjdU1TWHBXYVY1eVo2WHlETHJTdEpnaTNjdFYrOUdmK3hFUGh5RnhlT0Uyci9uZzByOUpoOTI5aStNMzZNVEZUd1VpVFc4U01iYXF3TXltVWwvNVp4c1I5ekwxVSt5VVU1N0xmTGx4OEJoaGprbGpHSURuN29ONmJxRXk3VkE3TlA0MlVrdENMd29EVURYreC9GdHlWT0RScnRLUXAvMU40bnRMb01ib2JhR24rRDY1ZXhxakRhVXhTKzQvQ0VUdThUK0J0TWxtbUR5VEwvTVQ3NG9jdjFYQjMwTnpnNWxhbDlST0ZQcFBuVm5GZVNEdmVibnZtTmZBcC9TYjRyQ1IxSmh2OEE5cDd4TXhnR21kb2xnaXY0TXhFcjN6MHB6dllFSGZWK0FqNU0yYnRXTDJUMXI5RVdFUnpCRTF6bHpCMlNjQ1lGU1IxSmpsOEV6bDBIZG0vUUlTNzdjRWpYemw5MTdHcjdoWjVvYlBZMlMwM3FVSHFLL1c3MVo0VlNhMlMyT2ZQMFF5UnIvcGNPZHlwR2hURVRrcS90V1phYkpyRUlacVZld0xnSm55dk51enN6R2tsNG5YK1RMS3hZdzVWODNiNlNGMzRHdHI1RUo3MmhlQ3VaY0s1Z3lpUUxyd0tmTWNGWW1MU0VSWWEyQzJlWlBHd0NHdGJFOTluRDhpbHpnUSs2c3BLU1FweTV5b0FhZFJKaEl5Z3lvbjF0MlRnYjY3SHZFcHpNUktNamN2OURaYUZtZHBIRkg2aGV6TEs0ZklrcDFmaXNOSys5N09va0QxcEVvemVPLzRHKzRaWVBUTGFVeFIrb1FsR1p3NEp4c2x1OFVOR2UwcW5aNElSMmhLTSs0d3llMDY1amIxTC96ZzBvQ09KYUhsM2llQUt2aVBCQ0VNVHFLd0pobHlXOW42cmIzbXpya0hqT2xsb3YyaVNoU210NVYzYXgyTFFCVWZ3MUNYTW5XQ01CL2dvdXNhVHRjNzczcjArajN2M2N3WGN1NEhmaFdRSE83MVZzcjlnQlBnNndjcE5jaHBza1NsWnY4VEdHcHB1bTJ1TTd4V0QvRUpXc2pOdTVCUW1BcnZMS05vWTRVVitvVG5qVFNYNTA1L2hGWnBaOXZEcFFJa1JQS0I0WmZuSVkyeDh2eVFJYWg3SDRpTk9nRGEydkFMNUZ3RGU2WDB4cFZ2WkZ4N1d6RHpBWlhaOGtRUzM4eTZ6Z3lScjZTZFhzLzN4LzQ5ajVEOEJCZ0R2UjI3WU81QU1vQUFBQUFCSlJVNUVya0pnZ2c9PQ=='

若返回的字符串 imageFlow 为图片的 base64 数据，可以采用以下两种方式展示：

  1. 拼接上 'image/png|jpeg|bmp|webp];base64,'（若 imageFlow 已包含图片头则无需拼接）后直接在 Image() 组件上展示，Image(imageFlow)

  2. 先将 base64 数据拼接上图片头 'image/png|jpeg|bmp|webp];base64,'（若 imageFlow 已包含图片头则无需拼接），使用 image.createImageSource(imageFlow) 创建 ImageSource; 再使用 ImageSource.createPixelMap() 方法创建 PixelMap，Image 组件可展示 PixelMap 图片，Image(PixelMap)

另外您提供的 imageFlow，我们尝试在安卓用您提供的方法转换后，获取到的 bitmap 为 null，请帮忙确认下提供的 imageFlow 数据是否有误。

您提供的这段数据是不是不全？只能显示半个验证码的图片，能否提供完整的数据。

'data:image/png;base64,' + 完整的 base64 数据 就可以直接在 Image 组件上展示，您可以尝试在线的 Base64 转图片的网站看看数据是否完整： 网站举例：https://www.toolfk.com/zh-CN/tools/base64-to-image.html

// Image 展示 base64 图片 Demo 如下：

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Image('data:image/png;base64,xxxx')
          .width('40%')
          .height('40%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中如何实现Base64数据转图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现Base64数据转图片可以通过Image组件和util模块中的Base64类来完成。首先，使用Base64类的decode方法将Base64字符串解码为字节数组。然后，将解码后的字节数组转换为PixelMap对象，最后将PixelMap对象赋值给Image组件的src属性以显示图片。

具体代码如下：

import util from '@ohos.util';
import image from '@ohos.multimedia.image';
import { Image } from '@ohos.arkui.advanced';

function base64ToImage(base64Str: string): void {
  // 解码Base64字符串
  const base64 = new util.Base64();
  const byteArray = base64.decode(base64Str);

  // 创建ImageSource对象
  const imageSource = image.createImageSource(byteArray.buffer);

  // 创建PixelMap对象
  imageSource.createPixelMap().then((pixelMap) => {
    // 将PixelMap对象赋值给Image组件
    const imgComponent = new Image();
    imgComponent.src = pixelMap;
  });
}

此代码展示了如何在鸿蒙Next中将Base64数据转换为图片并显示。

在HarmonyOS鸿蒙Next中，可以通过util模块提供的Base64工具类将Base64数据解码为字节数组，然后使用Image组件加载图片。具体步骤如下：

  1. 导入Base64工具类：
import ohos.utils.Base64;
  1. 解码Base64字符串：
String base64Data = "your_base64_string";
byte[] imageBytes = Base64.decode(base64Data, Base64.DEFAULT);
  1. 使用Image组件加载图片：
Image image = (Image) findComponentById(ResourceTable.Id_image);
image.setPixelMap(new PixelMap(imageBytes));

通过以上步骤即可将Base64数据转换为图片并显示。

回到顶部