网页截屏 js-web-screen-shot 截取最大化窗口显示不全问题-CSDN博客

本文链接：https://blog.csdn.net/m0_55959877/article/details/142759358

使用WebRtc模式截图，如果所选的窗口是最大化的，截图内容只会显示触发截图所在标签页或iframe的大小，截取不完全。
试了文档里的各项配置没能解决，拉了插件源码，改了canvas画布大小相关的代码，最后效果是如果截取内容宽或高大于截图所在标签页的宽高，会调整宽或高为标签页的大小。

我试了等比例缩小截图内容的方法，没有效果，如果有更好的办法可以交流一下。

插件配置

new screenShotPlugin({
	level: 999999,
	imgAutoFit: true,
	enableWebRtc: true,
	completeCallback: callback,
	cancelCallback: cancelCallback,
	cropBoxInfo: { x: 0, y: 0 },
	showScreenData: true,
	wrcWindowMode: true,
	hiddenScrollBar: {
	  state: true,
	  fillState: true,
	  color: '#fff',
	},
})

源码改动部分

loadScreenFlowData

  private loadScreenFlowData(triggerCallback: Function | undefined) {
    setTimeout(() => {
      // 获取截图区域canvas容器画布
      if (this.screenShotContainer == null) return;
      const canvasSize = this.plugInParameters.getCanvasSize();
      let containerWidth = this.screenShotImageController?.width;
      let containerHeight = this.screenShotImageController?.height;
      // 用户有传宽高时，则使用用户的
      if (canvasSize.canvasWidth !== 0 && canvasSize.canvasHeight !== 0) {
        containerWidth = canvasSize.canvasWidth;
        containerHeight = canvasSize.canvasHeight;
      }
      let { videoWidth, videoHeight } = this.videoController;
      if (this.wrcWindowMode) {
        videoWidth = videoWidth * this.dpr;
        videoHeight = videoHeight * this.dpr;
      }
      let winW = containerWidth;
      let winH = containerHeight;
      if (videoWidth > containerWidth) {
        winW = videoWidth;
      }
      if (videoHeight > containerHeight) {
        winH = videoHeight;
      }
      const context = getCanvas2dCtx(
        this.screenShotContainer,
        containerWidth,
        containerHeight
      );
      const imgContext = getCanvas2dCtx(
        this.screenShotImageController,
        winW,
        winH
      );
      if (context == null || imgContext == null) return;
      // 赋值截图区域canvas画布
      this.screenShotCanvas = context;
      if (this.wrcWindowMode) {
        // 从窗口视频流中获取body内容
        const bodyImgData = this.getWindowContentData(
          videoWidth * this.dpr,
          videoHeight * this.dpr,
          winW * this.dpr,
          winH * this.dpr
        );
        if (bodyImgData == null) return;
        // 将body内容绘制到图片容器里
        imgContext.putImageData(bodyImgData, 0, 0);
      } else {
        // ...无改动
      }
        // ...无改动
    }, this.wrcReplyTime);
  }

getWindowContentData

  private getWindowContentData(
    videoWidth: number,
    videoHeight: number,
    containerWidth: number,
    containerHeight: number
  ) {
    const videoCanvas = document.createElement("canvas");
    videoCanvas.width = videoWidth;
    videoCanvas.height = videoHeight;
    const videoContext = getCanvas2dCtx(videoCanvas, videoWidth, videoHeight);
    if (videoContext) {
      videoContext.drawImage(this.videoController, 0, 0);
      const startX = 0;
      const startY = videoHeight - containerHeight;
      const width = containerWidth;
      const height = videoHeight - startY;
      // 获取裁剪框区域图片信息;
      return videoContext.getImageData(
        0 * this.dpr,
        0 * this.dpr,
        videoCanvas.width * this.dpr,
        videoCanvas.height * this.dpr
      );
    }
    return null;
  }