关于前端:推荐一个h5用户截屏区域选择工具webareasselector

web-area-selector

相似其余截图工具的页面截图区域抉择工具，容许用户抉择一个页面区域并返回矩形区域信息

效果图

应用办法

1. 装置

npm i --save web-area-selector

或

yarn add web-area-selector

2. 导入

import AreaSelector from "web-area-selector";

3. 在须要开始录制的地位通过单例来开始截图，如下

async selectArea() {const result = await AreaSelector.getInstance().init();
  alert(JSON.stringify(result));
}

下面代码中，会期待用户实现框选并返回后果，后果信息如下, 别离为框选区域的左上角和右下角的地位

{
  leftTop: {
    clientX: 121,
    clientY: 200
  },
  rightBottom: {
    clientX: 1213,
    clientY: 850
  }
}

能够应用下面的矩形区域信息来做其余事件，如通过其余截图插件截图等

4. AreaSelector 也反对中途退出框选，在须要退出的中央调用

AreaSelector.getInstance().stop();

即可

如上面，监听键盘 ESC 事件

document.addEventListener("keydown", (event) => {switch (event.keyCode) {
    case 27:
      AreaSelector.getInstance().stop();
      break;
  }
});

PS: 倡议通过单例模式来应用，免得造成不必要的麻烦