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

Question

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

Snapabug使用applet工作

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:将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;

Answer 2

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