vue2 js实现截屏功能

效果图：

实现步骤：

1.安装插件

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

2.页面引入

import ScreenShort from "js-web-screen-shot"

3.实例化

new ScreenShort();

//实例化插件
initScreenShort() {
  const screenShotHandler = new ScreenShort({
    completeCallback: this.callback // 截图确认按钮回调函数
  });
  // screenShotHandler.screenShortController.style.zIndex = 9999999   
  // screenShotHandler.screenShortController.style.width = '100vw'
  // screenShotHandler.screenShortController.style.height = '100vh'
  //设置canvas画布样式
},

//截图确认按钮回调函数
callback(e) {
  console.log(e)
  // 截图路径 base64
},

备注：

        链接地址协议  :  https

        工具栏id  :  toolPanel

        工具栏图标定制：

                square 矩形绘制图标

                round 圆型绘制图标

                right-top 箭头绘制图标

                brush 画笔工具

                mosaicPen 马赛克工具

                text 文本工具

                save 保存

                undo 撤销

                close 关闭

                confirm 确认

           eg：

.square {
    background-image: url("你的图标路径") !important;
    
    &:hover {
      background-image: url("你的图标路径") !important;
    }
    
    &:active {
      background-image: url("你的图标路径") !important;
    }
 }

参考：js-web-screen-shot - npmweb端自定义截屏插件(原生JS版)https://www.npmjs.com/package/js-web-screen-shot

WebRTC API - Web APIs | MDNWebRTC（網路即時通訊技術）是一個提供 Web 應用程式及網站進行錄影或隨選播放串流音訊與影像的技術，可以直接使用瀏覽器進行資料交換而無須透過中介服務。https://developer.mozilla.org/zh-TW/docs/Web/API/WebRTC_API