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().getSettings()
?.displaySurface;
// 获取当前选择的标签页标识
displayLabel = this.captureStream.getVideoTracks().label;
}
// 执行截图成功回调
if (triggerCallback) {
triggerCallback({
code: 0,
msg: "截图加载完成",
displaySurface,
displayLabel
});
}
// 停止捕捉屏幕
this.stopCapture();
// 重置光标状态
document.body.classList.remove("no-cursor");
}, this.wrcReplyTime);
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]