没有有实现截图的方法

Question

我只用过html2canvas，网上找到的其他插件也都是以读取解析dom节点的方式实现截图，有没有像截图工具那样的截图方式的js插件，给个选择框，选中哪里截哪里。

Answer 1

写了1天，还是用html2canvas实现了，在pc端展现效果有瑕疵，凑活能用
实现方法：
1.截图框手写，跟h2c插件没什么关系
2.记录框选范围坐标
3.用h2c插件画出main（选body会把截图框也画进去，主页面用main包起来）
4.用getImageData获取canvas中对用截图框的数据
5.1:1用createElement('canvas')的putImageData将上一步getImageData获取的数据填充
6.用toDataURL方法获取上一步canvas的base64
7.create一个a标签,设置href为base64 download="截图.png"
8.模拟点一下a标签下载截图

注意：页面有滚动的话坐标自己慢慢调吧

Answer 2

可以使用 MediaDevices/getDisplayMedia 这个 webRTC 接口，这个接口是用来进行屏幕共享的，这就意味着可以抓取到屏幕上显示的内容，只要拿到其中一帧显示到网页上，让用户自己框选就行。
好处是可以直接拿到显示器上显示的任何内容（据称是从显卡那里直接拿到的），包括跨域的内容、其他软件的界面（跨屏幕共享可能会抛错，原因不明）。
但在体验上不可能做到像微信、QQ那样方便，因为会弹出窗口给用户确认，未经训练的用户往往不知道应该怎么选。
尤其在火狐上，弹出的窗口只会显示可供共享的标题，而不会显示这些内容的截图：

可以用下面的代码在控制台尝试一波：

const videoEl = document.createElement('video');
document.body.appendChild(videoEl);
document.onclick = async function test(){
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: false,
    cursor: "motain", // always
    logicalSurface: false, // 设置是否包含所选屏幕外区域的一些信息
  });
    document.onclick = null;
    videoEl.srcObject = stream;
      videoEl.play();
}

比如下面这个例子我就在思否页面实时查看在知乎摸鱼的实况：

Answer 3

kscreenshot npm下载