推薦一個h5使用者截圖區域選擇工具web-area-sselector

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: 建議通過單例模式來使用，以免造成不必要的麻煩