web-area-selector
類(lèi)似其他截圖工具的頁(yè)面截圖區(qū)域選擇工具忙芒，允許用戶(hù)選擇一個(gè)頁(yè)面區(qū)域并返回矩形區(qū)域信息
效果圖
web-area-selector01.gif
使用方法
- 安裝
npm i --save web-area-selector
或
yarn add web-area-selector
- 導(dǎo)入
import AreaSelector from "web-area-selector";
- 在需要開(kāi)始錄制的位置通過(guò)單例來(lái)開(kāi)始截圖凯砍，如下
async selectArea() {
const result = await AreaSelector.getInstance().init();
alert(JSON.stringify(result));
}
上面代碼中领斥，會(huì)等待用戶(hù)完成框選并返回結(jié)果，結(jié)果信息如下,分別為框選區(qū)域的左上角和右下角的位置
{
leftTop: {
clientX: 121,
clientY: 200
},
rightBottom: {
clientX: 1213,
clientY: 850
}
}
可以使用上面的矩形區(qū)域信息來(lái)做其他事情蒜魄，如通過(guò)其他截圖插件截圖等
- AreaSelector 也支持中途退出框選专肪，在需要退出的地方調(diào)用
AreaSelector.getInstance().stop();
即可
如下面，監(jiān)聽(tīng)鍵盤(pán) ESC 事件
document.addEventListener("keydown", (event) => {
switch (event.keyCode) {
case 27:
AreaSelector.getInstance().stop();
break;
}
});
PS: 建議通過(guò)單例模式來(lái)使用柄错，以免造成不必要的麻煩
