vue js-web-screen-shot浏览器截取其他非全屏窗口界面

网页截屏 js-web-screen-shot 截取其他窗口 显示不全问题

npm 安装 js-web-screen-shot

npm install js-web-screen-shot --save

js-web-screen-shot默认截屏是从左下角开始的，修改成左上角开始，然后编辑cropBoxInfo参数宽高进行截取，目前截取适配的其他窗口宽高不能比浏览器页面宽高大

vue代码

import ScreenShot from 'js-web-screen-shot'

new ScreenShot({
                enableWebRtc: true,
                level: 99999,
                wrcWindowMode: true,
                clickCutFullScreen: true,
                imgAutoFit: true,
                showScreenData: true,
                completeCallback: this.callback, // 截图成功完成的回调
                closeCallback: this.cancelCallback, // 截图取消的回调
                hiddenScrollBar: {
                    state: true,
                    fillState: true,
                    color: "#FFFFFF"
                },
                // cropBoxInfo: {x: 0, y: 0, w: 1757, h: 1011},
                cropBoxInfo: {x: 0, y: 0, w: 1290, h: 640},
                // canvasWidth: window.innerWidth,
                // canvasHeight: window.innerHeight,
            })

---

修改js-web-screen-shot代码

main.ts文件

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 imgContainerWidth = containerWidth;
      let imgContainerHeight = containerHeight;
      if (this.wrcWindowMode) {
        imgContainerWidth = containerWidth * this.dpr;
        imgContainerHeight = containerHeight * this.dpr;
      }
      const context = getCanvas2dCtx(
        this.screenShotContainer,
        containerWidth,
        containerHeight
      );
      const imgContext = getCanvas2dCtx(
        this.screenShotImageController,
        imgContainerWidth,
        imgContainerHeight
      );
      if (context == null || imgContext == null) return;
      // 赋值截图区域canvas画布
      this.screenShotCanvas = context;
      const { videoWidth, videoHeight } = this.videoController;
      if (this.wrcWindowMode) {
        // 从窗口视频流中获取body内容
        const bodyImgData = this.getWindowContentData(
          videoWidth,
          videoHeight,
          containerWidth * this.dpr,
          containerHeight * this.dpr
        );
        if (bodyImgData == null) return;
        // 将body内容绘制到图片容器里
        imgContext.putImageData(bodyImgData, 0, 0);
      } else {
        // 对webrtc源提供的图像宽高进行修复
        let fixWidth = containerWidth;
        let fixHeight = (videoHeight * containerWidth) / videoWidth;
        if (fixHeight > containerHeight) {
          fixWidth = (containerWidth * containerHeight) / fixHeight;
          fixHeight = containerHeight;
        }
        // 对视频容器的内容进行裁剪
        fixWidth = this.wrcImgPosition.w > 0 ? this.wrcImgPosition.w : fixWidth;
        fixHeight =
          this.wrcImgPosition.h > 0 ? this.wrcImgPosition.h : fixHeight;
        imgContext?.drawImage(
          this.videoController,
          this.wrcImgPosition.x,
          this.wrcImgPosition.y,
          fixWidth,
          fixHeight
        );
        // 隐藏滚动条会出现部分内容未截取到，需要进行修复
        const diffHeight = containerHeight - fixHeight;
        if (
          this.hiddenScrollBar.state &&
          diffHeight > 0 &&
          this.hiddenScrollBar.fillState
        ) {
          // 填充容器的剩余部分
          imgContext.beginPath();
          let fillWidth = containerWidth;
          let fillHeight = diffHeight;
          if (this.hiddenScrollBar.fillWidth > 0) {
            fillWidth = this.hiddenScrollBar.fillWidth;
          }
          if (this.hiddenScrollBar.fillHeight > 0) {
            fillHeight = this.hiddenScrollBar.fillHeight;
          }
          imgContext.rect(0, fixHeight, fillWidth, fillHeight);
          imgContext.fillStyle = this.hiddenScrollBar.color;
          imgContext.fill();
        }
      }

      // 初始化截图容器
      this.initScreenShot(undefined, context, this.screenShotImageController);
      let displaySurface = null;
      let displayLabel = null;
      if (this.captureStream) {
        // 获取当前选择的窗口类型
        displaySurface = this.captureStream.getVideoTracks()[0].getSettings()
          ?.displaySurface;
        // 获取当前选择的标签页标识
        displayLabel = this.captureStream.getVideoTracks()[0].label;
      }
      // 执行截图成功回调
      if (triggerCallback) {
        triggerCallback({
          code: 0,
          msg: "截图加载完成",
          displaySurface,
          displayLabel
        });
      }
      // 停止捕捉屏幕
      this.stopCapture();
      // 重置光标状态
      document.body.classList.remove("no-cursor");
    }, this.wrcReplyTime);
  }

---