后台管理系统流程中需要邮件截图，原来的逻辑是让用户自己截图完保存，然后再通过图片上传操作。后来用户嫌麻烦，提出了类似微信截图的需求。经过调研发现，有一个三方库可以实现。

js-web-screen-shot

1. 使用前提

网站必须是https的，否则会报错提示： 浏览器不支持webrtc 或者 用户未授权( TypeError: Cannot read properties of undefined (reading 'getDisplayMedia') )

如果使用的umi的网站，则在config中配置如下：

devServer: {
    https: true
  },

2. 使用配置

1. 安装

我安装的时候使用yarn未成功，使用npm成功了

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

2. 分享窗口和截图回调

下面的配置中响应时间不能太短，不然容易截图不成功

import ScreenShot from 'js-web-screen-shot';

  const startScreenShot = () => {
    new ScreenShot({
      wrcWindowMode: true,
      wrcReplyTime: 1000,
      completeCallback: ({ base64, cutInfo }) => {
        console.log(base64, cutInfo);
      }
    });
  };
  
  
 <div className="btn-panel" onClick={startScreenShot}>
          点我截图
 </div>