javascript - 任何可能的方式将网页的任何部分绘制到 Canvas 中

Question

大家。

我知道如何使用以下代码快照将图像从 HTML 图像元素复制到 Canvas 中:

ctx = canvas.getContext("2d");
ctx.drawImage(imgElement, 0, 0, 300, 300);

但我想做的是，绘制页面任何部分的图像。因此，页面可能包含 ImageElement、一些具有不同颜色的边框、具有不同背景图像的叠加层、一些具有自定义 google 字体的文本等。所以我只想将页面的任何部分复制到 Canvas 中，就像屏幕捕获工具一样。

这可以用 JavaScript 实现吗？或者说理论上还不可能？浏览器厂商有计划支持这种功能吗？

Answer 1

您可以使用html2canvas截取您的网页或部分网页的“屏幕截图”。

这是一个例子:

var btn = document.getElementsByTagName('button')[0];
var h1 = document.getElementsByTagName('h1')[0];
var h1Rect = h1.getBoundingClientRect();

btn.addEventListener('click', function() {
  html2canvas(document.body, {
    width: h1Rect.width,
    height: h1Rect.height + h1Rect.top,
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    }
  });
});

span {
  color: red;
  font-weight: normal;
  font-style: italic;
}

canvas {
  margin-top: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<h1><span>Hello</span> HTML2Canvas</h1>
<button>Click to draw h1 to canvas</button>