HarmonyOS 鸿蒙Next 如何把Canvas画出来的内容，保存为图片？

HarmonyOS 鸿蒙Next 如何把Canvas画出来的内容，保存为图片？

如何把Canvas画出来的内容，保存为图片，并存储到相册中，代码如下（未实现点击保存）

@Entry
@Component
struct Index {
  private lastX: number = 0;
  private lastY: number = 0;
  private isDown: Boolean = false;
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All, distance: 1 })
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  draw(startX, startY, endX, endY) {
    // 起点
    this.context.moveTo(startX, startY);
    // 终点
    this.context.lineTo(endX, endY);
    // 调用 stroke，即可看到绘制的线条
    this.context.stroke();
  }

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('90%')
        .backgroundColor('#C0C0C0')
        .onReady(() => {
          this.context.lineWidth = 3; // 设置绘制线条的宽度
          this.context.strokeStyle = "#000"; // 设置描边的颜色。
        })
        .gesture(
          PanGesture(this.panOption)
            .onActionStart((event: any) => {
              this.isDown = true;
              // 按下时的点作为起点
              this.lastX = event.localX;
              this.lastY = event.localY;
              // 创建一个新的路径
              this.context.beginPath();
            })
            .onActionUpdate((event: any) => {
              // 没有按下就不管
              if (!this.isDown) return;
              const offsetX = event.localX
              const offsetY = event.localY
              // 调用绘制方法
              this.draw(this.lastX, this.lastY, offsetX, offsetY);
              // 把当前移动时的坐标作为下一次的绘制路径的起点
              this.lastX = offsetX;
              this.lastY = offsetY;
            })
            .onActionEnd(() => {
              this.isDown = false;
              // 关闭路径
              this.context.closePath();
            })
        )
      Row() {
        Button('点击保存为图片').width('70%').onClick(() => {
          // TODO 这里的逻辑怎么写
        })
      }.width('100%').height('10%').justifyContent(FlexAlign.Center)
    }.width('100%').height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 如何把Canvas画出来的内容，保存为图片？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复 
this.context.toDataURL()转化的base64字符串

更多关于HarmonyOS 鸿蒙Next 如何把Canvas画出来的内容，保存为图片？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


请问楼主是怎么解决的？

在其他评论区找到的方法

saveImage() {
  //文件保存路径
  let uri = '';
  try {
    let PhotoSaveOptions = new picker.PhotoSaveOptions();
    //保存图片默认名称
    PhotoSaveOptions.newFileNames = ['test.png'];
    let photoPicker = new picker.PhotoViewPicker();
    //调起系统的图片保存功能
    photoPicker.save(PhotoSaveOptions).then((PhotoSaveResult) => {
      uri = PhotoSaveResult[0];
      //获取图片的base64字符串
      let imageStr = this.context.toDataURL().split(',')[1];
      //打开文件
      let file = fs.openSync(uri, fs.OpenMode.READ_WRITE);
      //base64字符串转成buffer
      const decodeBuffer = buffer.from(imageStr, 'base64').buffer;
      //写入文件
      fs.writeSync(file.fd, decodeBuffer);
      //关闭文件
      fs.closeSync(file);
    }).catch((err: Error) => {
      console.error(err + '');
    })
  } catch (e) {
    console.error(e);
  }
}

看看这个帖子，是不是有用

https://developer.huawei.com/consumer/cn/forum/topic/0208127758700315109?fid=0102683795438680754

在HarmonyOS中，可以使用PixelMap将Canvas绘制的内容保存为图片。首先，通过Canvas的getPixelMap()方法获取当前绘制内容的PixelMap对象。然后，使用ImagePacker将PixelMap编码为图片文件。具体步骤如下：

  1. 创建Canvas并绘制内容。
  2. 调用Canvas的getPixelMap()方法获取PixelMap对象。
  3. 使用ImagePacker将PixelMap编码为图片文件。

示例代码：

import image from '@ohos.multimedia.image';
import fileio from '@ohos.fileio';

// 假设canvas已经创建并绘制了内容
let pixelMap = canvas.getPixelMap();

// 创建ImagePacker对象
let imagePacker = image.createImagePacker();

// 设置编码格式为JPEG
let options = { format: 'image/jpeg', quality: 100 };

// 将PixelMap编码为图片
imagePacker.packing(pixelMap, options).then((data) => {
    // 将编码后的图片数据写入文件
    let filePath = 'path/to/save/image.jpg';
    fileio.writeFile(filePath, data).then(() => {
        console.log('Image saved successfully');
    }).catch((err) => {
        console.error('Failed to save image:', err);
    });
}).catch((err) => {
    console.error('Failed to pack image:', err);
});

通过上述步骤，可以将Canvas绘制的内容保存为图片文件。

回到顶部