7

显然有捕获网页截图的解决方案：

Snapabug使用小程序工作

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

Webkit2png是一个命令行工具，所以不是浏览器代码的一部分。

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

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

4

2 回答 2

14

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

如果您要渲染的 HTML 不是很复杂或不需要像素完美，您可以跳过 Rasterize 并直接使用 foreignObject，如MDN：将 DOM 对象绘制到画布中所述：

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;
于 2014-10-18T06:51:17.857 回答
0

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

于 2013-08-22T17:01:57.513 回答