HarmonyOS 图片操作，合成后导出base64

import AbilityConstant from '@ohos.app.ability.AbilityConstant'; 
import hilog from '@ohos.hilog'; 
import UIAbility from '@ohos.app.ability.UIAbility'; 
import Want from '@ohos.app.ability.Want'; 
import window from '@ohos.window'; 
 
export default class EntryAbility extends UIAbility { 
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 
  } 
 
  onDestroy(): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 
  } 
 
  onWindowStageCreate(windowStage: window.WindowStage): void { 
    // Main window is created, set main page for this ability 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 
 
    windowStage.loadContent('pages/Index', (err, data) => { 
      if (err.code) { 
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 
        return; 
      } 
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); 
    }); 
  } 
 
  onWindowStageDestroy(): void { 
    // Main window is destroyed, release UI related resources 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 
  } 
 
  onForeground(): void { 
    // Ability has brought to foreground 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 
  } 
 
  onBackground(): void { 
    // Ability has back to background 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

@Entry 
@Component 
struct GetImageData { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 
  private img:ImageBitmap = new ImageBitmap("/common/images/666.png") 
  private img2:ImageBitmap = new ImageBitmap("/common/images/90.jpg"); 
  @State ima:PixelMap|undefined=undefined; 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Canvas(this.context) 
        .width('100%') 
        .height('100%') 
        .backgroundColor('#F5DC62') 
        .onReady(() =>{ 
          let offContext = this.offCanvas.getContext("2d", this.settings) 
          // 使用drawImage接口将图片画在（0，0）为起点，宽高100的区域 
          offContext.drawImage(this.img,0,0,100,100); 
          // 使用drawImage接口将图片画在（0，0）为起点，宽高20的区域 
          offContext.drawImage(this.img2,40,40,20,20); 
          // 使用getImageData接口，获得canvas组件区域中，（50，50）为起点，宽高130范围内的绘制内容 
          //let imagedata = offContext.getImageData(50,50,130,130); 
          let imagedata = offContext.getImageData(50,50,130,130); 
 
          this.ima=offContext.getPixelMap(0,0,100,100); 
          // 使用putImageData接口将得到的ImageData画在起点为（150， 150）的区域中 
          // offContext.putImageData(imagedata,150,150); 
          // 将离屏绘制的内容画到canvas组件上 
          let image = this.offCanvas.transferToImageBitmap(); 
          this.context.transferFromImageBitmap(image); 
        }) 
      Image(this.ima) 
        .width(100).height(100) 
 
    } 
    .width('100%') 
    .height('100%') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.