HarmonyOS鸿蒙Next中打开的webview怎么截整个webview的图

HarmonyOS鸿蒙Next中打开的webview怎么截整个webview的图 有没有官方的案例，不太想用第三方的

4 回复

【背景知识】

  • 通过webPageSnapshot获取网页全量绘制结果，开发者可在回调方法中对获取到的绘制结果进行处理。
  • 通过SaveButton安全控件来实现文件保存。常规方案中截图后保存需要申请权限ohos.permission.WRITE_IMAGEVIDEO，而部分开发者无法申请该权限，因此可以通过安全控件的方式保存截图。

【解决方案】

如上所述，由于考虑到通用解决方案中需要申请权限，因此为了照顾更一般的开发需要，本文给出的解决方案最终是以webPageSnapshot+SaveButton安全控件的方式来完成前端网页的绘制以及图片保存操作。样例代码如下：

import { abilityAccessCtrl } from '@kit.AbilityKit';
import fs from '@ohos.file.fs';
import { BusinessError } from '@kit.BasicServicesKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { webview } from '@kit.ArkWeb';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();
  @State message: string = '';
  @State readBuffer: ArrayBuffer = new ArrayBuffer(96)
  @State saveButtonOptions: SaveButtonOptions = {
    icon: SaveIconStyle.FULL_FILLED,
    text: SaveDescription.SAVE_IMAGE,
    buttonType: ButtonType.Capsule
  } // 设置安全控件按钮属性
  atManager = abilityAccessCtrl.createAtManager();
  aboutToAppear(): void {
    webview.WebviewController.enableWholeWebPageDrawing();
  }

  build() {
    Column() {
      SaveButton(this.saveButtonOptions) // 创建安全控件按钮
        .onClick(async (event, result: SaveButtonOnClickResult) => {
          if (result == SaveButtonOnClickResult.SUCCESS) {
            try {
              let context: Context = getContext(this);
              this.controller.webPageSnapshot({ id: "1234", size: { width: '100%', height: '100%' } }, async (error, result) => {
                if (error) {
                  console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
                  return;
                }
                if (result) {
                  console.info(`size： ${JSON.stringify(result.size)}`);
                  let helper = photoAccessHelper.getPhotoAccessHelper(context);
                  this.message = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
                  console.log('path: ' + this.message)
                  let file = await fs.open(this.message, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
                  console.log('file: ', file);
                  const imagePackerApi: image.ImagePacker = image.createImagePacker();
                  let packOpts: image.PackingOption = { format: "image/jpeg", quality: 98 };
                  imagePackerApi.packing(result.imagePixelMap, packOpts, async (err: BusinessError, data: ArrayBuffer) => {
                    this.readBuffer = data
                    await fs.write(file.fd, this.readBuffer);
                    await fs.close(file.fd);
                    console.info('save image succeed.')
                    if (err) {
                      console.error('packing failed.');
                    } else {
                      console.info('packing succeeded.');
                    }
                  })
                }
              });
            } catch (err) {
              console.error(`create asset failed with error: ${err.code}, ${err.message}`);
            }
          } else {
            console.error('SaveButtonOnClickResult create asset failed');
          }
        })

      Web({
        src: 'https://www.example.com/',
        controller: this.controller,
      })
        .domStorageAccess(true)
        .overScrollMode(OverScrollMode.NEVER)
        .height('100%')
        .nestedScroll({ scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中打开的webview怎么截整个webview的图的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


有的：

在HarmonyOS Next中，要截取整个WebView内容，可以使用WebView组件的onScreenCapture方法。这个方法会返回一个PixelMap对象，包含WebView当前显示内容的完整截图。示例代码如下：

let webView = this.$('webview') as webview.WebView;
webView.onScreenCapture().then((pixelMap) => {
  // 处理获取到的PixelMap图像数据
}).catch((err) => {
  console.error('截图失败', err);
});

注意：该方法需要WebView内容完全加载完成才能获取完整截图。

在HarmonyOS Next中，可以通过WebView组件的capturePage()方法实现整个网页截图。以下是实现方案：

  1. 基本用法：
webView.capturePage((err, pixelMap) => {
  if (!err) {
    // 处理获取到的pixelMap图像数据
  }
});
  1. 完整示例代码：
import web_webview from '@ohos.web.webview';

// 获取WebView组件
const webview = web_webview.WebviewController.getWebviewController();

// 截图回调
webview.capturePage((err, pixelMap) => {
  if (err) {
    console.error('截图失败: ' + JSON.stringify(err));
    return;
  }
  
  // 保存图片示例
  const imagePacker = image.createImagePacker();
  imagePacker.packing(pixelMap).then(data => {
    // 处理图片二进制数据
  });
});
  1. 注意事项：
  • 需要申请ohos.permission.READ_MEDIA权限
  • 截图范围包含整个网页内容，包括未显示在可视区域的部分
  • 返回的是PixelMap对象，可转换为图片格式保存

此方案为HarmonyOS官方API，无需依赖第三方库。

回到顶部