HarmonyOS鸿蒙Next中base64格式svg如何用Image组件展示

HarmonyOS鸿蒙Next中base64格式svg如何用Image组件展示

如何用Image组件展示上方base64格式svg图片

  1. 直接传入无法展示
  2. 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-image-15-V5 中的方式转为image.PixelMap格式时报错
3 回复

需要将svg标签格式的代码加上<?xml开头，然后再转base64就可以正常显示了 参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#svg标识说明

参考demo：

import { image } from '@kit.ImageKit';
import { util } from '@kit.ArkTS';

@Entry
@Component
struct Index {
  @State message: string = 'Base64ToPixelMap';
  @State private pixelMap: PixelMap | null = null;
  // 加上<?xml version="1.0"?>svg标签，通过该数据转base64后得到svgBase64
  public svg:string = '<?xml version="1.0"?><svg width="48px" height="48px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="appsIconTitle" stroke="#2329D6" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="appsIconTitle">Apps drawer</title> <circle cx="6" cy="6" r="1"/><circle cx="12" cy="6" r="1"/><circle cx="18" cy="6" r="1"/><circle cx="6" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="18" cy="12" r="1"/><circle cx="6" cy="18" r="1"/><circle cx="12" cy="18" r="1"/><circle cx="18" cy="18" r="1"/></svg>'
  public svgBase64: string = 'PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJhcHBzSWNvblRpdGxlIiBzdHJva2U9IiMyMzI5RDYiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIGZpbGw9Im5vbmUiIGNvbG9yPSIjMjMyOUQ2Ij4gPHRpdGxlIGlkPSJhcHBzSWNvblRpdGxlIj5BcHBzIGRyYXdlcjwvdGl0bGU+IDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSIxIi8+IDxjaXJjbGUgY3g9IjEyIiBjeT0iNiIgcj0iMSIvPiA8Y2lyY2xlIGN4PSIxOCIgY3k9IjYiIHI9IjEiLz4gPGNpcmNsZSBjeD0iNiIgY3k9IjEyIiByPSIxIi8+IDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEiLz4gPGNpcmNsZSBjeD0iMTgiIGN5PSIxNiIgcj0iMSIvPiA8Y2lyY2xlIGN4PSI2IiBjeT0iMTgiIHI9IjEiLz4gPGNpcmNsZSBjeD0iMTIiIGN5PSIxOCIgcj0iMSIvPiA8Y2lyY2xlIGN4PSIxOCIgY3k9IjE4IiByPSIxIi8+IDwvc3ZnPg=='

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(async () => {
            let helper = new util.Base64Helper();
            let buffer: ArrayBuffer = helper.decodeSync(this.svg, util.Type.MIME).buffer as ArrayBuffer;
            let imageSource = image.createImageSource(buffer);
            let opts: image.DecodingOptions = { editable: true };
            this.pixelMap = await imageSource.createPixelMap(opts);
          })
        Image(this.pixelMap)
          .width(200).height(200).margin(15)
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中base64格式svg如何用Image组件展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，展示Base64格式的SVG图像可以通过Image组件实现。首先，确保Base64编码的SVG数据以data:image/svg+xml;base64,开头。然后，将该字符串直接赋值给Image组件的src属性。例如：

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

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Image('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0icmVkIi8+PC9zdmc+')
        .width(100)
        .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

上述代码展示了如何将Base64编码的SVG图像加载到Image组件中。Image组件会自动解码并渲染SVG图像。

在HarmonyOS鸿蒙Next中，如果要将Base64格式的SVG用Image组件展示，可以按照以下步骤操作：

  1. 解码Base64：将Base64字符串解码为SVG原始数据。
  2. 设置Image源：将解码后的SVG数据作为src属性传递给Image组件。

示例代码：

import { Image } from '@ohos.arkui';

const base64SVG = 'data:image/svg+xml;base64,...'; // 你的Base64 SVG数据
const image = new Image();
image.src = base64SVG;

确保Base64字符串包含正确的MIME类型前缀（如data:image/svg+xml;base64,），以便系统识别为SVG格式。

回到顶部