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

发布于 1周前 作者 vueper 来自 鸿蒙OS

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

期望将多张画布横向合并成一张图片并保存，代码如下： 如何合成呢?

@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(() => {
      //合成
    })
}

} }


更多关于HarmonyOS 鸿蒙Next 多张画布横向合成一张图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

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

图片拼接使用 canvas 合并图片，参考 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);
}

更多关于HarmonyOS 鸿蒙Next 多张画布横向合成一张图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，若要实现多张画布（Canvas）横向合成一张图片，可以通过以下步骤进行：

  1. 创建Bitmap和Canvas：首先，根据最终合成图片的总宽度和高度，创建一个大的Bitmap对象。然后，基于这个Bitmap对象创建一个大Canvas。

  2. 绘制每张画布内容：遍历所有需要合成的画布（Canvas），获取每个画布的Bitmap。在大Canvas上，根据每个Bitmap的宽度和合成顺序，依次绘制到指定的横向位置。

  3. 保存合成图片：完成所有画布的绘制后，将大Canvas所关联的Bitmap保存为图片文件或输出为其他需要的格式。

  4. 内存管理：在处理Bitmap和Canvas时，注意及时释放不再使用的资源，避免内存泄漏。

具体实现时，可以使用HarmonyOS提供的图形处理API来完成上述操作。这些API允许你操作Bitmap和Canvas，实现图像的合成。

示例代码框架（伪代码）：

Bitmap bigBitmap = ...; // 创建大Bitmap
Canvas bigCanvas = new Canvas(bigBitmap);

for (Canvas smallCanvas : smallCanvases) {
    Bitmap smallBitmap = smallCanvas.getBitmap();
    bigCanvas.drawBitmap(smallBitmap, xOffset, 0, null); // xOffset为横向偏移量
    xOffset += smallBitmap.getWidth();
}

// 保存bigBitmap为图片

// 释放资源
``

如果问题依旧没法解决请联系官网客服,官网地址是 [https://www.itying.com/category-93-b0.html](https://www.itying.com/category-93-b0.html)
回到顶部