前端js实现页面截图

Question

前端js 局部截图

有没有同伴使用过火狐的.drawWindow()方法 这个方法实在是没有用过不了解，网上也找不到具体的方法讲怎么实现的，找到的大部分都是同一篇文章互相借鉴，具体这个方法应该怎么使用，希望有懂的同伴可以帮帮我

有个疑惑非常不清楚，想了解一下，这个方法是不是只能在火狐浏览器上使用，这个方法和html2canvas 这个方法那个好用一点

Answer 1

.drawWindow() 方法是 Firefox 浏览器的特有方法，只能在 Firefox 浏览器上使用。它的作用是将浏览器的指定区域或网页元素的内容绘制成 canvas 对象。

例如，以下代码将会截取当前页面的第一个 div 元素的内容，并将其绘制到一个新的 canvas 元素中：

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let div = document.querySelector('div');

// 将 div 元素的内容绘制到 canvas 中
canvas.width = div.offsetWidth;
canvas.height = div.offsetHeight;
ctx.drawWindow(window, div.offsetLeft, div.offsetTop, div.offsetWidth, div.offsetHeight, "rgb(255,255,255)");

需要注意的是，这个方法需要获取到指定区域的坐标以及宽高，并且在跨域的情况下可能会出现问题。

相比之下，html2canvas 是一个开源的 JavaScript 库，它可以在所有主流浏览器中使用，并且可以将任意的 DOM 元素转换成 canvas 对象。使用方法也很简单，例如：

html2canvas(document.querySelector('div')).then(canvas => {
  // 在这里处理 canvas 对象
});

两者在功能上基本相似，可以根据自己的需要选择使用哪一个。