#鸿蒙通关秘籍#如何实现HarmonyOS Web页面的长截图功能？

实现HarmonyOS Web页面的长截图功能可以通过以下步骤完成：

1. 创建Web组件加载指定的网页，并获取Web组件和网页的实际尺寸：

   Web({
     src: this.webPageUrl,
     controller: this.webviewController
   })
     .id(Constants.WEB_ID)
     .onAreaChange((oldValue, newValue) => {
       this.webWidth = newValue.width as number;
       this.webHeight = newValue.height as number;
     })
     .onPageEnd(() => {
       const script = '[document.documentElement.scrollWidth, document.documentElement.scrollHeight]';
       this.webviewController.runJavaScriptExt(script).then((result) => {
         switch (result.getType()) {
           case webview.JsMessageType.ARRAY:
             this.h5Width = (result.getArray() as number[])[0];
             this.h5Height = (result.getArray() as number[])[1];
             break;
           default:
             console.error('Get web page size type error.');
             break;
         }
       });
     });
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.

   复制

2. 创建截图函数，执行滚动截图并拼接：

   const snipTimes = Math.ceil(this.h5Height / this.webHeight);
   for (let i = 0; i < snipTimes; i++) {
     let curSnip = await componentSnapshot.get(Constants.WEB_ID);
     if (i === snipTimes - 1) {
       let h = this.h5Height % this.webHeight;
       await curSnip.crop({ x: 0, y: vp2px(this.webHeight - h),
         size: {
           height: vp2px(h),
           width: vp2px(this.webWidth)
         }
       });
       offCanvasCtx.drawImage(curSnip, 0, this.webHeight * i, this.webWidth, h);
     } else {
       offCanvasCtx.drawImage(curSnip, 0, this.webHeight * i, this.webWidth, this.webHeight);
     }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.

   复制

3. 截图后弹出预览窗口，可以滚动查看完整的截图，并保存图片到用户相册中：

   SaveButton({
     icon: SaveIconStyle.FULL_FILLED,
     text: SaveDescription.SAVE_IMAGE,
     buttonType: ButtonType.Capsule
   })
    .onClick(async (event, result) => {
      if (result == SaveButtonOnClickResult.SUCCESS) {
        let helper = photoAccessHelper.getPhotoAccessHelper(this.context);
        try {
          let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
          let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
          const imagePackerApi: image.ImagePacker = image.createImagePacker();
          let packOpts: image.PackingOption = {
            format: Constants.SAVE_IMAGE_FORMAT,
            quality: Constants.SAVE_IMAGE_QUALITY,
          };
          imagePackerApi.packToFile(this.mergedImage, file.fd, packOpts).then(() => {
            console.info('Succeeded in packToFile');
          }).catch((error: BusinessError) => {
            console.error(`Failed to packToFile. Error code is ${error.code}, message is ${error.message}`);
          })
        } catch (error) {
          const err: BusinessError = error as BusinessError;
          console.error(`Failed to save photo. Error code is ${err.code}, message is ${err.message}`);
        }
      }
      this.closeSnapPopup();
    })
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.
   24.
   25.
   26.
   27.
   28.

   复制