html - html2canvas 和 rasterizehtml.js 有什么区别

Question

显然有捕获网页屏幕截图的解决方案:

Snapabug通过使用小程序工作

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

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

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

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

Answer 1

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

如果您呈现的 HTML 不是很复杂或不需要像素完美，您可以跳过光栅化并直接使用 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;