前端实现网页选区截图功能

先说说背景
公司项目要实现一个网页截图，识别文字的功能
思路很简单，前端实现截图，并把图片发送给后台，后台通过调用某度的ocr识别，识别出来文字，然后返回给前段展示。
身为前端的我，技术点也就在实现截图了。

先在网上查了查网页截图的插件。发现清一色推荐html2canvas
原理就是通过canvas截图截全屏，再通过鼠标点击位置，移动距离，抬起位置，重新在新图片上，截图新的图片，并返回base64图片

然后用了这个方法，历尽艰辛又解决了图片跨域问题，鼠标反向截图问题，以及新增一个可视化选框，最终返回一个base64的图片，本来沾沾自喜皆大欢喜的时候，发现一个致命问题。html2canvas对屏幕分辨率较高的屏幕不兼容，出现了各种选取不准的问题。本来在大显示器上可以，但是只要换到比较新的笔记本上都不行，而且跟屏幕宽度没关系，反复测试发现只要屏幕分辨路大于两千就会出现这个问题。

最后无奈的放弃这个插件，推荐一款非常好用的插件:

kscreenshot

上代码

npm install kscreensh