HarmonyOS 有没有不依赖组件，绘制一张图片的方法？

Question

想实现个工具类，通过传入的字符串生成一张100 * 100的图片，并保存到磁盘。咨询下有没有不依赖组件 绘制一张图片的方法。

Answer 1

可以参考以下代码

import { image } from '@kit.ImageKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
import { promptAction } from '@kit.ArkUI';

@Component
struct Index {
  private scroller: Scroller = new Scroller()
  @State pixelMap: PixelMap | undefined = undefined;
  @State saveButtonOptions: SaveButtonOptions = {
    icon: SaveIconStyle.FULL_FILLED,
    text: SaveDescription.SAVE_IMAGE,
    buttonType: ButtonType.Capsule
  }
  imagePackerApi = image.createImagePacker();
  packOpts: image.PackingOption = { format: "image/jpeg", quality: 100, bufferSize: 400 * 600 };

  async aboutToAppear(): Promise<void> {
    const color: ArrayBuffer = new ArrayBuffer(400 * 600 * 4);
    let opts: image.InitializationOptions = { editable: true, pixelFormat: 3, size: { height: 600, width: 400 } }
    await image.createPixelMap(color, opts).then((pixelMap: image.PixelMap) => {
      console.info('Succeeded in creating pixelmap.');
      this.pixelMap = pixelMap
    }).catch((error: BusinessError) => {
      console.error(`Failed to create pixelmap. code is ${error.code}, message is ${error.message}`);
    })
    const area: image.PositionArea = {
      pixels: new ArrayBuffer(600 * 400 * 4),
      offset: 0,
      stride: 400 * 4,
      region: { size: { height: 600, width: 400 }, x: 0, y: 0 }
    };
    let bufferArr: Uint8Array = new Uint8Array(area.pixels);
    for (let i = 0; i < bufferArr.length; i++) {
      bufferArr[i] = 128;
    }
    if (this.pixelMap != undefined) {
      await this.pixelMap.writePixels(area).then(() => {
        console.info('Succeeded in writing pixelmap into the specified area.');
      }).catch((error: BusinessError) => {
        console.error(`Failed to write pixelmap into the specified area. code is ${error.code}, message is ${error.message}`);
      })
    }
    let offScreenCanvas = new OffscreenCanvas(px2vp(400), px2vp(600)) // 注意这里OffscreenCanvas的参数单位为vp
    let OffScreenContext = offScreenCanvas.getContext("2d")
    OffScreenContext.drawImage(this.pixelMap, 0, 0, offScreenCanvas.width, offScreenCanvas.height)
    OffScreenContext.fillStyle = '#FF0000'
    OffScreenContext.font = "30px"
    OffScreenContext.fillText("这是一段文字", px2vp(20), px2vp(100))
    // 获取新的PixelMap
    this.pixelMap = OffScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height)

    // 保存图片进沙箱
    let path : string = getContext(this).filesDir + "/pixel_map.jpg";
    let file = fileIo.openSync(path, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
    this.imagePackerApi.packToFile(this.pixelMap, file.fd, this.packOpts).then(() => {
      // 直接打包进文件
      console.info('pack the image success');
    }).catch((error : BusinessError) => {
      console.error('Failed to pack the image. And the error is: ' + error);
    })
  }

  build() {
    NavDestination() {
      Scroll(this.scroller) {
        Column() {

          Image(this.pixelMap)

          // 保存图片进图库
          SaveButton(this.saveButtonOptions)// 创建安全控件按钮
            .onClick(async (event, result: SaveButtonOnClickResult) => {
              if (result == SaveButtonOnClickResult.SUCCESS) {
                try {
                  let context = getContext();
                  let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
                  let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
                  let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
                  this.imagePackerApi.packing(this.pixelMap, this.packOpts).then(async (data: ArrayBuffer) => {
                    await fileIo.write(file.fd, data);
                    await fileIo.close(file.fd);
                    promptAction.showToast({ message: '已保存至相册！' });
                    console.info('Succeeded in packing the image.');
                  }).catch((error: BusinessError) => {
                    console.error(`Failed to pack the image.code ${error.code},message is ${error.message}`);
                  })
                } catch (err) {
                  console.error(`create asset failed with error: ${err.code}, ${err.message}`);
                }
              } else {
                console.error('SaveButtonOnClickResult create asset failed');
              }
            })
        }
      }
      .scrollBar(BarState.Off)
      .scrollable(ScrollDirection.Vertical)
    }
    .height('100%')
    .width('100%')
  }
}