HarmonyOS 多张画布横向合成一张图片

需求是期望将多张画布横向合并成一张图片并保存，代码如下：

如何合成呢?

@Entry
@Component
struct NewCanvasPage {
  canvas: CanvasRenderingContext2D = new CanvasRenderingContext2D();
  canvas2: CanvasRenderingContext2D = new CanvasRenderingContext2D();
  canvas3: CanvasRenderingContext2D = new CanvasRenderingContext2D();

  build() {
    Column() {
      Row() {
        Canvas(this.canvas)
          .layoutWeight(1)
          .height('30%')
          .backgroundColor('#ffff00')
          .onReady(() => {
            this.canvas.fillStyle = '#0000ff'
            this.canvas.fillRect(20, 20, 150, 100)
          })

        Canvas(this.canvas2)
          .layoutWeight(1)
          .margin({ left: 20, right: 20 })
          .height('30%')
          .backgroundColor('#ffff00')
          .onReady(() => {
            this.canvas2.font = '10vp sans-serif'
            this.canvas2.fillText("第二张画布", 20, 100)
          })

        Canvas(this.canvas3)
          .layoutWeight(1)
          .height('30%')
          .backgroundColor('#ffff00')
          .onReady(() => {
            this.canvas3.font = '20vp sans-serif'
            this.canvas3.fillText("第三张画布", 0, 100)
          })
      }.margin({ left: 15, right: 15 })

      Text("合成")
        .width(100)
        .height(40)
        .borderRadius(10)
        .backgroundColor($r('app.color.color_204adc'))
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
        .margin({ top: 20 })
        .fontSize(15)
        .onClick(() => {
          //合成
        })
    }
  }
}
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.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

HarmonyOS

aquaa

2024-12-25 11:41:58

浏览

回答 1

按赞同

按时间

shlp

暂未提供直接将画布合成图片的能力，可以先将画布进行截图操作，将画布转化为图片然后再将图片拼接。画布转图片，可以使用componentSnapshot.get接口实现。具体使用可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5#ZH-CN_TOPIC_0000001847209944__componentsnapshotget

图片拼接使用canvas 合并图片，参考demo：

图片合并 demo，以两张图片竖向排放为例

// 图片合并 使用 canvas
public static async imageMerge(img1: PixelMap, img2: PixelMap) {
  // 获取照片信息
  let info1: image.ImageInfo = await img1.getImageInfo();
  let info2: image.ImageInfo = await img2.getImageInfo();
  let twidth = info1.size.width + info2.size.width;
  let theight = info1.size.height + info2.size.height
  // 创建离屏的 canvas
  let offCanvas2D = new OffscreenCanvas(twidth, theight);
  let offContext = offCanvas2D.getContext("2d");
  offContext.drawImage(img1, 0, 0, info1.size.width, info1.size.height);
  offContext.drawImage(img2, 0, info1.size.height, info2.size.width, info2.size.height);

  // 获取合并后的 img pixel
  let finalPixel = offContext.getPixelMap(0, 0, twidth, theight);
  return finalPixel;
}

public static async saveImage(img: PixelMap, path: string) {
  let imgPacker = image.createImagePacker();
  let imgBuf = await imgPacker.packing(img, {format: "image/jpeg", quality: 100});
  let fd = fileIo.openSync(path, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE).fd;
  fileIo.writeSync(fd, imgBuf);
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

2024-12-25 14:42:07

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 多张画布横向合成一张图片

订阅鸿蒙技术特刊，精选内容抢先看