h5在线网站建设徐州市政建设集团有限责任公司

网页截屏 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);}

---