#鸿蒙通关秘籍#如何使用Canvas组件和OffscreenCanvas实现水印功能？

本案例展示了如何在HarmonyOS NEXT中通过Canvas组件和OffscreenCanvas来实现水印的功能。

1. 使用Canvas组件绘制水印：

   • 创建一个自定义的WaterMarkView组件，在Canvas组件的onReady函数中设置绘制水印的属性，包括填充色、字体大小、文本对齐方式等。
   • 通过context.fillText在画布中循环绘制水印内容，确保水印覆盖整个画布。
   • 使用overlay属性将水印以浮层形式放置在页面中。

   Canvas(this.context)
      .width('100%')
      .height('100%')
      .hitTestBehavior(HitTestMode.Transparent)
      .onReady(() => {
        this.context.fillStyle = '#10000000';
        this.context.font = '16vp';
        this.context.textAlign = 'center';
        this.context.textBaseline = 'middle';
        for (let i = 0; i < this.context.width / 120; i++) {
          this.context.translate(120, 0);
          let j = 0;
          for (; j < this.context.height / 120; j++) {
            this.context.rotate(-Math.PI / 180 * 30);
            this.context.fillText('水印水印', -60, -60);
            this.context.rotate(Math.PI / 180 * 30);
            this.context.translate(0, 120);
          }
          this.context.translate(0, -120 * j);
        }
      });
   

   @Builder
   contentView() {
     Stack() {
       Column() {
       }
       .height('100%')
       .overlay(createWaterMarkView())
     }
   }
   

2. 使用OffscreenCanvas绘制水印：

   • 利用imageSource.createPixelMap生成图片的像素数据，通过OffscreenCanvas创建绘图上下文。
   • 使用offScreenContext执行图像绘制，并通过fillText添加水印文本。
   • 最后，将新的图像像素数据保存到本地。

   addWaterMark() {
     CONTEXT.resourceManager.getMediaContent(this.imageSource.id, (error, value) => {
       if (error) {
         return;
       }
       let imageSource = image.createImageSource(value.buffer);
       imageSource.getImageInfo((err, data) => {
         if (err) {
           return;
         }
         let opts = {
           editable: true,
           desiredSize: {
             height: data.size.height,
             width: data.size.width
           }
         }
         imageSource.createPixelMap(opts, async (err, pixelMap) => {
           if (err) {
             return;
           }
           const offScreenCanvas = new OffscreenCanvas(data.size.width, data.size.height);
           const offScreenContext = offScreenCanvas.getContext('2d');
           this.imageScale = offScreenCanvas.width / display.getDefaultDisplaySync().width;
           offScreenContext.drawImage(pixelMap, 0, 0, offScreenCanvas.width, offScreenCanvas.height);
           offScreenContext.textAlign = 'right';
           offScreenContext.textBaseline = 'bottom';
           offScreenContext.fillStyle = '#fffa0606';
           offScreenContext.font = 32 * this.imageScale + 'vp';
           offScreenContext.shadowBlur = 20;
           offScreenContext.shadowColor = '#F3F3F3';
           offScreenContext.fillText('追逐繁星的太阳', offScreenCanvas.width - 20 * this.imageScale, offScreenCanvas.height - 20 * this.imageScale);
   
           this.pixelMap = offScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height);
           const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(CONTEXT);
           const uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
           if (this.pixelMap !== undefined) {
             const imagePacker = image.createImagePacker();
             const imageBuffer = await imagePacker.packing(this.pixelMap, { format: 'image/png', quality: 100 });
             try {
               let file = fs.openSync(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
               fs.writeSync(file.fd, imageBuffer);
               fs.closeSync(file.fd);
             } catch (err) {
               console.log(`fs failed ${err.code},errMessage:message`);
             }
           }
         })
       })
     })
   }