HarmonyOS 是否支持根据绘制逻辑生成imagedata？

Question

如题：HarmonyOS 是否支持根据绘制逻辑生成imagedata？

Answer 1

可以参考这个demo：

import { image } from '@kit.ImageKit'
import { fileIo } from '@kit.CoreFileKit'

@Entry
@Component
struct Demo3 {
  context: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))
  //签字区域
  guessContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true))
  //自动生成图片画布
  drawIng: boolean = false
  lastX: number = 0
  lastY: number = 0
  gLastX: number = 0
  gLastY: number = 0
  pointList: PointClass[] = []
  timer: number = -1
  @State imgStr: PixelMap | undefined = undefined
  drawLine(x: number, y: number) {
    this.context.moveTo(this.lastX, this.lastY)
    // 先将线移动到上一个点
    this.context.lineTo(x, y)
    this.lastX = x
    // 将当前内容的x记录
    this.lastY = y
    // 将当前的y记录
    this.context.stroke()
  }

  drawGuess() {
    if (this.pointList.length && this.timer === -1) {
      this.timer = setInterval(() => {
        if (this.pointList.length === 0) {
          clearInterval(this.timer)
          this.timer = -1
          return
        }
        let pt1: PointClass = this.pointList.shift() as PointClass
        this.guessLine(pt1)
      }, 100)
    }
  }

  guessLine(p: PointClass) {
    if (p.reset) {
      this.guessContext.closePath()
      this.guessContext.beginPath()
      this.gLastX = p.x
      this.gLastY = p.y
    } else {
      this.guessContext.moveTo(this.gLastX, this.gLastY)
      // 先将线移动到上一个点
      this.guessContext.lineTo(p.x, p.y)
      this.gLastX = p.x
      // 将当前内容的x记录
      this.gLastY = p.y
      // 将当前的y记录
      this.guessContext.stroke()
    }
  }
  transFile() {
  }

  build() {
    Scroll() {
      Column({ space: 20 }) {
        Canvas(this.context)
          .width(360)
          .height(300)
          .backgroundColor(Color.Grey)
          .onTouch((event: TouchEvent) => {
            if (event.type === TouchType.Down) {
              this.lastX = event.touches[0].x
              this.lastY = event.touches[0].y
              this.drawIng = true
              this.context.beginPath()
              this.pointList.push({ x: this.lastX, y: this.lastY, reset: true })
            }
            if (event.type === TouchType.Move) {
              if (this.drawIng) {
                this.pointList.push({ x: event.touches[0].x, y: event.touches[0].y, reset: false })
                this.drawLine(event.touches[0].x, event.touches[0].y)
              }
            }
            if (event.type === TouchType.Up) {
              this.drawIng = false
              this.context.closePath()
            }
            // 开始模仿
            this.drawGuess()
          }
          )
          .onReady(() => {
            this.context.lineWidth = 4
            this.context.strokeStyle = "blue"
          })

        Row({ space: 20 }) {
          Button("清屏")
            .onClick(() => {
              this.context.clearRect(0, 0, 360, 300)
              this.guessContext.clearRect(0, 0, 360, 300)
              this.pointList = []
            })
          Button("存储图片")
            .onClick(() => {
              // this.imgStr = this.context.toDataURL("image/jpeg")
              // console.info('图片开始存储'+this.imgStr)
              this.imgStr = this.context.getPixelMap(0, 0, 360, 300)
              let packOpts: image.PackingOption = { format: "image/jpeg", quality: 98 }
              let file = fileIo.openSync(getContext(this).cacheDir + '/1.jpeg',
                fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);

              const imagePackerApi: image.ImagePacker = image.createImagePacker();
              imagePackerApi.packToFile(this.context.getPixelMap(0, 0, 360, 300), file.fd, packOpts).then(() => {
                fileIo.close(file)
              })
            })
        }
        if (this.imgStr) {
          Image(this.imgStr).width(360).height(300)
        }
      }
    }
  }
}
class PointClass {
  x: number = 0
  y: number = 0
  reset?: boolean = false
}