使用ArkTS在HarmonyNext系统上，实现图片增加文字水印 原创

Stack() {
   Image(this.bgImg)
     .width('100%')
     .draggable(false)
     .objectFit(ImageFit.Contain)
     .onAreaChange((oldArea: Area, newArea: Area) => {
       if ((oldArea.width != newArea.width || oldArea.height != newArea.height) && newArea.width > 0 && newArea.height > 0) {
        this.canvasWidth = newArea.width as number
        this.canvasHeight = newArea.height as number
        this.offContext2D = new OffscreenCanvasRenderingContext2D(this.canvasWidth, this.canvasHeight, this.settings)
        this.offContext2D.fillStyle = '#1F000000'
        this.offContext2D.font = '18vp sans-serif'
       }
     })

   Canvas(this.context2D)
     .width(this.canvasWidth)
     .height(this.canvasHeight)
 }
 .width('100%')
 .height('100%')
 .align(Alignment.Center)
 .id("root")
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

openGallery() {
    try {
      let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
      PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
      PhotoSelectOptions.maxSelectNumber = 1;
      let photoPicker = new photoAccessHelper.PhotoViewPicker();
      photoPicker.select(PhotoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        if (photoSelectResult.photoUris.length > 0) {
          this.bgImg = photoSelectResult.photoUris[0]
          this.maskText = ''
        }
        console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(photoSelectResult));
      }).catch((err: BusinessError) => {
        console.error(`PhotoViewPicker.select failed with err: ${err.code}, ${err.message}`);
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.error(`PhotoViewPicker failed with err: ${err.code}, ${err.message}`);
    }
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

watchMaskText() {
    this.offContext2D.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
    this.context2D.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
    this.offContext2D.saveLayer()
    this.offContext2D.rotate(-45 * Math.PI / 180)
    let cols = Math.sqrt(this.canvasWidth * this.canvasWidth + this.canvasHeight * this.canvasHeight) / 100
    for (let i = 0; i < cols; i++) {
      let x = (-cols / 2 + i) * 200
      for(let j = 0; j < 100; j++) {
        this.offContext2D.fillText(this.maskText, x, (i * j) * 50)
      }
    }
    this.offContext2D.rotate(45 * Math.PI / 180)
    this.offContext2D.restoreLayer()
    let image = this.offContext2D.transferToImageBitmap()
    if (image) {
      this.context2D.transferFromImageBitmap(image)
      image.close()
    }
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

save() {
    componentSnapshot.get("root", async (error: Error, pixmap: image.PixelMap) => {
      if (error) {
        console.log("error: " + JSON.stringify(error))
        return;
      }
      try {
        let packOpts: image.PackingOption = { format: "image/jpeg", quality: 100 }
        let arrayBuffers: ArrayBuffer = await this.imageImagePacker.packing(pixmap, packOpts)
        let result = await savePhoto(getContext(this), arrayBuffers)
        promptAction.showToast({message: result ? '图片已保存到系统相册' : '图片保存失败'})
      } catch (error) {
        console.error("error is "+ JSON.stringify(error));
      }
    }, {scale : 2, waitUntilRenderFinished : true})
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.