web截图

在项目开发过程中，我们会遇到需要截图当前系统窗口， 用户借助第三方截图工具可以实现。

但有一种，在供排水系统重，有个视频巡检功能，且能系统自动巡检，即按照系统设定的步骤，一步步播放视频，且自动填入巡检情况，这时候需要系统能自动截图并保存到相应的巡检步骤下。html2canvas是常用的截图插件，但该插件不支持网页有视频窗口，如有视频窗口，截图后，视频窗口是显示的全黑，没有视频内容。

但客户就要这么个功能，怎么办呢？经过各种测试，调试后，终于找到一个方法：js-web-screen-shot

废话不多说，首先，安装依赖。npm install

引用插件：import ScreenShort from 'js-web-screen-shot'

具体代码如下图：

        captureScreenshot() {
				    if (this.captureScreenshotLoading == false) {
					this.$Notice.success({
						title: "提示",
						desc: "图片正在上传，请稍后",
						duration: 3,
					});
					return
				}
                //获取需要截图的dom
				let el = document.querySelector('.patrol-task-executing .ivu-modal-content');
				let rect = el.getBoundingClientRect();
				setTimeout(() => {
					const screenShotHandler = new ScreenShort({
						enableWebRtc: true, //是否显示选项框
						level: 99999, //层级级别
						clickCutFullScreen: true,
						cropBoxInfo: {
							x: rect.x,
							y: rect.y,
							w: rect.width,
							h: rect.height
						},
						// canvasWidth:document.body.clientWidth,
						// canvasHeight:window.screen.availHeight,
						triggerCallback: () => {
							// 截图组件加载完毕调用此方法来完成框选区域的截图
							screenShotHandler.completeScreenshot()
						},
						completeCallback: this.screenShortSuccess,
						// closeCallback: this.screenShortClose,
					});
				}, 0)
			},


            screenShortSuccess(data) {
				let bar = document.querySelector('#screenShortLoadingbar');
				bar.style.display = 'none';
				var image = new Image();
				image.src = data.base64;
				image.onload = () => {
					var canvas = this.convertImageToCanvas(image);
					var url = canvas.toDataURL("image/png");
					//图片上传系统，这里可以根据自己需求处理
                    this.captureScreenshotUpload(url)
				}
			},

            screenShortClose() {
				let bar = document.querySelector('#screenShortLoadingbar');
				bar.style.display = 'none';
				console.log('截图结束')
			},