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

网页截屏 js-web-screen-shot 截取其他窗口 表现不全问题
  npm 安装 js-web-screen-shot

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

复制代码

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

1. import ScreenShot from 'js-web-screen-shot'
3. new ScreenShot({
4.                 enableWebRtc: true,
5.                 level: 99999,
6.                 wrcWindowMode: true,
7.                 clickCutFullScreen: true,
8.                 imgAutoFit: true,
9.                 showScreenData: true,
10.                 completeCallback: this.callback, // 截图成功完成的回调
11.                 closeCallback: this.cancelCallback, // 截图取消的回调
12.                 hiddenScrollBar: {
13.                     state: true,
14.                     fillState: true,
15.                     color: "#FFFFFF"
16.                 },
17.                 // cropBoxInfo: {x: 0, y: 0, w: 1757, h: 1011},
18.                 cropBoxInfo: {x: 0, y: 0, w: 1290, h: 640},
19.                 // canvasWidth: window.innerWidth,
20.                 // canvasHeight: window.innerHeight,
21.             })

复制代码

---

  修改js-web-screen-shot代码

  main.ts文件

1. private loadScreenFlowData(triggerCallback: Function | undefined) {
2.     setTimeout(() => {
3.       // 获取截图区域canvas容器画布
4.       if (this.screenShotContainer == null) return;
5.       const canvasSize = this.plugInParameters.getCanvasSize();
6.       let containerWidth = this.screenShotImageController?.width;
7.       let containerHeight = this.screenShotImageController?.height;
8.       // 用户有传宽高时，则使用用户的
9.       if (canvasSize.canvasWidth !== 0 && canvasSize.canvasHeight !== 0) {
10.         containerWidth = canvasSize.canvasWidth;
11.         containerHeight = canvasSize.canvasHeight;
12.       }
13.       let imgContainerWidth = containerWidth;
14.       let imgContainerHeight = containerHeight;
15.       if (this.wrcWindowMode) {
16.         imgContainerWidth = containerWidth * this.dpr;
17.         imgContainerHeight = containerHeight * this.dpr;
18.       }
19.       const context = getCanvas2dCtx(
20.         this.screenShotContainer,
21.         containerWidth,
22.         containerHeight
23.       );
24.       const imgContext = getCanvas2dCtx(
25.         this.screenShotImageController,
26.         imgContainerWidth,
27.         imgContainerHeight
28.       );
29.       if (context == null || imgContext == null) return;
30.       // 赋值截图区域canvas画布
31.       this.screenShotCanvas = context;
32.       const { videoWidth, videoHeight } = this.videoController;
33.       if (this.wrcWindowMode) {
34.         // 从窗口视频流中获取body内容
35.         const bodyImgData = this.getWindowContentData(
36.           videoWidth,
37.           videoHeight,
38.           containerWidth * this.dpr,
39.           containerHeight * this.dpr
40.         );
41.         if (bodyImgData == null) return;
42.         // 将body内容绘制到图片容器里
43.         imgContext.putImageData(bodyImgData, 0, 0);
44.       } else {
45.         // 对webrtc源提供的图像宽高进行修复
46.         let fixWidth = containerWidth;
47.         let fixHeight = (videoHeight * containerWidth) / videoWidth;
48.         if (fixHeight > containerHeight) {
49.           fixWidth = (containerWidth * containerHeight) / fixHeight;
50.           fixHeight = containerHeight;
51.         }
52.         // 对视频容器的内容进行裁剪
53.         fixWidth = this.wrcImgPosition.w > 0 ? this.wrcImgPosition.w : fixWidth;
54.         fixHeight =
55.           this.wrcImgPosition.h > 0 ? this.wrcImgPosition.h : fixHeight;
56.         imgContext?.drawImage(
57.           this.videoController,
58.           this.wrcImgPosition.x,
59.           this.wrcImgPosition.y,
60.           fixWidth,
61.           fixHeight
62.         );
63.         // 隐藏滚动条会出现部分内容未截取到，需要进行修复
64.         const diffHeight = containerHeight - fixHeight;
65.         if (
66.           this.hiddenScrollBar.state &&
67.           diffHeight > 0 &&
68.           this.hiddenScrollBar.fillState
69.         ) {
70.           // 填充容器的剩余部分
71.           imgContext.beginPath();
72.           let fillWidth = containerWidth;
73.           let fillHeight = diffHeight;
74.           if (this.hiddenScrollBar.fillWidth > 0) {
75.             fillWidth = this.hiddenScrollBar.fillWidth;
76.           }
77.           if (this.hiddenScrollBar.fillHeight > 0) {
78.             fillHeight = this.hiddenScrollBar.fillHeight;
79.           }
80.           imgContext.rect(0, fixHeight, fillWidth, fillHeight);
81.           imgContext.fillStyle = this.hiddenScrollBar.color;
82.           imgContext.fill();
83.         }
84.       }
86.       // 初始化截图容器
87.       this.initScreenShot(undefined, context, this.screenShotImageController);
88.       let displaySurface = null;
89.       let displayLabel = null;
90.       if (this.captureStream) {
91.         // 获取当前选择的窗口类型
92.         displaySurface = this.captureStream.getVideoTracks()[0].getSettings()
93.           ?.displaySurface;
94.         // 获取当前选择的标签页标识
95.         displayLabel = this.captureStream.getVideoTracks()[0].label;
96.       }
97.       // 执行截图成功回调
98.       if (triggerCallback) {
99.         triggerCallback({
100.           code: 0,
101.           msg: "截图加载完成",
102.           displaySurface,
103.           displayLabel
104.         });
105.       }
106.       // 停止捕捉屏幕
107.       this.stopCapture();
108.       // 重置光标状态
109.       document.body.classList.remove("no-cursor");
110.     }, this.wrcReplyTime);
111.   }

复制代码

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。