Question

显然，有一些解决方案可以捕获网页的屏幕截图：

Snapabug使用小程序

GrabzIt我想这是在服务器端完成的。

Webkit2png是一个命令行工具，因此实际上并不是浏览器代码的一部分。

可能还有其他使用ActiveX的解决方案。

但我对仅使用Javascript的解决方案感兴趣。根据我的理解，html2canvas和rasterizeHTML.js都允许将html（在网页中）转换为图像。那么，html2canvas与rasterizehtml.js的实现方式有何不同？根据我的理解，他们似乎都使用Canvas来生成结果。那么它们有什么不同呢？哪一个更好？

Answer 1

主要区别在于Rasterize是SVG foreignObject的包装器，而html2canvas本质上是从头开始重新实现浏览器HTML呈现。 Rasterize必须处理很多安全问题，但我认为它的方法更好，因为html2canvas的2400代码只有950行。

如果您渲染的HTML不是很复杂或者不需要像素完美，那么您可以跳过Rasterize并直接使用foreignObject，如MDN: Drawing DOM objects into a canvas中所述：

var canvas = document.getElementById('canvas');
var ctx    = canvas.getContext('2d');

var data   = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
               '<foreignObject width="100%" height="100%">' +
                 '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
                   '<em>I</em> like <span style="color:white; text-shadow:0 0 2px blue;">cheese</span>' +
                 '</div>' +
               '</foreignObject>' +
             '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

Answer 2

我尝试使用html2canvas.js和rasterizeHTML.js来显示一段html。但两者都有一些问题。 html2canvas.js无法通过具有转换的元素（例如，带有css缩放变换的文本）。只要，我不能让rasterizeHTML.js在显示html的画布内绘制画布。

什么是html2canvas和rasterizehtml.js之间的区别

2 个答案: