【组件】网页截图

背景：最近工作上遇到了截屏的需求，按照之前的产品开发经历，直接使用html2canvas + canvas2image就可以实现了，但由于某些原因前端的dom结构异常复杂导致这样截屏需要5s左右，这是难以接受的。于是通过跟前端的同事一起讨论后，找了一个解决的方案。

下面记录下可以实现截图的一些前端组件：

一、html2canvas + canvas2image

通过html2canvas读取dom结构并通过canvas画出来，再通过canvas2image将canvas转成需要的图片格式。

html2canvas: npm地址
canvas2image: npm地址

二、dom-to-image

根据domvas实现的将dom转化为图片的组件库。

dom-to-image: npm地址

三、html-to-image

dom-to-image的升级版本，可以将html转换成更多的数据格式。

html-to-image: npm地址

四、js-screen-shot

另一种实现的方式，基于现代的浏览器特性getUserMedia，根据用户给予使用媒体输入的许可，产生一个MediaStream。然后将MediaStream传给video并将其转为图片。这个特性也可以搭配webrtc实现web端远程桌面共享。

js-screen-shot还参照QQ截图的样式内部集成了图片裁剪编辑等功能，但这种方式除了需要授予权限还需选择截取的范围，并且对于浏览器也有要求。

js-web-screen-shot: npm地址