web-area-selector

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

效果图

应用办法

  1. 装置
npm i --save web-area-selector

或

yarn add web-area-selector
  1. 导入
import AreaSelector from "web-area-selector";
  1. 在须要开始录制的地位通过单例来开始截图，如下
async selectArea() {  const result = await AreaSelector.getInstance().init();  alert(JSON.stringify(result));}
下面代码中，会期待用户实现框选并返回后果，后果信息如下,别离为框选区域的左上角和右下角的地位
{  leftTop: {    clientX: 121,    clientY: 200  },  rightBottom: {    clientX: 1213,    clientY: 850  }}

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

  1. AreaSelector 也反对中途退出框选，在须要退出的中央调用
AreaSelector.getInstance().stop();

即可

如上面，监听键盘 ESC 事件

document.addEventListener("keydown", (event) => {  switch (event.keyCode) {    case 27:      AreaSelector.getInstance().stop();      break;  }});
PS: 倡议通过单例模式来应用，免得造成不必要的麻烦