Question

大家。

我知道如何使用以下代码快照将图像从HTML图像元素复制到画布：

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

但我想做的是绘制页面任何部分的图像。因此页面可能包含ImageElement，一些具有各种颜色的边框，具有不同背景图像的Overlaid图层，一些带有自定义Google字体的文本等。所以我只想将页面的任何部分复制到画布中，就好像屏幕截图工具一样。

这可以用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>

任何可能的方法将网页的任何部分绘制到画布中

1 个答案: