HarmonyOS 鸿蒙Next 折叠屏调用pixelMap的crop方法时会报错

截图函数

async snapShot(): Promise<image.PixelMap> {
  return new Promise(async (resolve, reject) => {
    // 获取Web页面尺寸
    this.getWebSize();
    // 截图前的状态初始化
    await this.beforeSnapshot();
    // 使用Canvas离屏绘制在缓冲区拼接截图
    const canvasSetting: RenderingContextSettings = new RenderingContextSettings(true);
    const offCanvasCtx: OffscreenCanvasRenderingContext2D =
      new OffscreenCanvasRenderingContext2D(this.h5Width, this.h5Height, canvasSetting);
    // 前置常量
    const snipTimes = Math.ceil(this.h5Height / this.webHeight);
    const lastTime = snipTimes - 1;
    const leftoverHeight = this.h5Height % this.webHeight;
    let cropLeftover: image.Region = { x: 0, y: 0, size: { height: 0, width: 0 } }
    if (this.WebTouchBottom) {
      // 这里要分两种情况，1.滚动到底部时，裁剪应该取最后一张除去重复部分以外的底部
      cropLeftover = {
        x: 0,
        y: vp2px(this.webHeight - leftoverHeight),
        size: {
          height: vp2px(leftoverHeight),
          width: vp2px(this.webWidth)
        }
      };
    } else {
      // 2.未滚动到底部时，裁剪应该取最后一张leftoverHeight的上部分
      cropLeftover = {
        x: 0,
        y: 0,
        size: {
          height: vp2px(leftoverHeight),
          width: vp2px(this.webWidth)
        }
      };
    }

    if (snipTimes === 1) {
      const curSnip = await componentSnapshot.get('receiptShare');
      offCanvasCtx.drawImage(curSnip, 0, 0, this.webWidth, this.webHeight);
    } else {
      // 开始截图
      for (let i = 0; i < snipTimes; i++) {
        const curSnip = await componentSnapshot.get('receiptShare');
        // 最后一次截图需要特殊处理，去除重复部分
        if (i === lastTime) {
          cropLeftover = {
            x: 0,
            y: vp2px(this.webHeight - leftoverHeight),
            size: {
              height: vp2px(leftoverHeight),
              width: vp2px(this.webWidth)
            }
          };
          try {
            await curSnip.crop(cropLeftover);
          } catch (e) {
            YTLog.error(JSON.stringify(e))
          }
          offCanvasCtx.drawImage(curSnip, 0, this.webHeight * i - 2, this.webWidth, leftoverHeight);
        } else {
          offCanvasCtx.drawImage(curSnip, 0, this.webHeight * i, this.webWidth, this.webHeight);
        }
        // 继续滚动
        this.mWebviewController.scrollBy(0, this.webHeight);
        // 延时保证滚动完成
        await this.sleep(200);
      }
    }

    // 截图后的操作
    await this.afterSnapshot();
    // 获取pixelMap
    this.mergedImage = offCanvasCtx.getPixelMap(0, 0, this.h5Width, this.h5Height);
    resolve(this.mergedImage)
  })
}

截图前获取尺寸

getWebSize() {
  const SCRIPT = '[document.documentElement.scrollWidth, document.documentElement.scrollHeight]';
  this.mWebviewController.runJavaScriptExt(SCRIPT).then((result) => {
    try {
      switch (result.getType()) {
        case webview.JsMessageType.ARRAY:
          this.h5Width = (result.getArray() as number[])[0]; // 单位是vp
          this.h5Height = (result.getArray() as number[])[1];
          break;
        default:
          break;
      }
    } catch (e) {

    }
  });
}

截图开始前的操作

• 保存网页当前位置，用于恢复状态
• 截图当前页面作为遮罩层，避免用户察觉组件的滚动，提高用户体验
• Web页面滚动到顶部，准备开始截图
• 设置截图后小弹窗的位置，提示用户暂时不要操作，等待截图
• 开启提示小弹窗

async beforeSnapshot() {
  // 保存网页当前位置，用于恢复
  this.xOffsetBefore = this.curXOffset;
  this.yOffsetBefore = this.curYOffset;
  this.h5Height = this.curYOffset + Math.ceil(this.webHeight);
  // TODO: 知识点: 使用componentSnapshot.get接口直接获取组件的渲染结果，而不需要将屏幕截图
  this.webMaskImage = await componentSnapshot.get('receiptShare');
  this.mWebviewController.scrollTo(0, 0);
  // 延时确保已经滚动到了顶部
  await this.sleep(200);
}

截图之后的操作

• 恢复web页面到截图之前的位置
• 取消遮罩层

async afterSnapshot() {
  this.mWebviewController.scrollTo(this.xOffsetBefore, this.yOffsetBefore);
  await this.sleep(200);
}

sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}