js截取网页任意区域图片？

Question

接到这么一个需求，我感觉我技术有限，没有想到解决办法。
大概就是，任意一个网页，用户任意绘制一个区域进行截图（后面还要考虑gif）。请问有没有大佬知道可以实现不？

Answer 1

之前看到的一个

• 实现Web端自定义截屏
• likaia/js-screen-shot: web端自定义截屏插件(原生JS版)

Answer 2

你可以使用html2canvas库来截取网页任意区域的图片。它可以将HTML元素转换为画布，然后你可以使用toDataURL()方法将画布转换为图片。你可以使用以下代码来实现：

html2canvas(document.querySelector("#element")).then(canvas => {
    let dataURL = canvas.toDataURL();
    // 使用dataURL执行某些操作
});

Answer 3

看到有一个同行分享过，大致思路是利用webrtc录制用户当前的页面。有了数据流 你可以截图或者转gif了，缺点是 需要用户授权

Answer 4

写浏览器插件吧。不过满足 用户任意绘制一个区域进行截图 这个需求的插件其实已经有了，但是不知道能不能录制GIF。

---

原来是在项目内的网页任意位置截图啊，可以考虑 Html2Image的方式，然后配合Canvas来绘图。
可以去github上面搜一搜，应该也有成熟的项目。

Answer 5

kscreenshot