什么html2canvas和rasterizehtml.js

显然有捕捉网页截图解决方案之间的区别：什么html2canvas和rasterizehtml.js

Snapabug作品通过使用小程序

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

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

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

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

来源

2013-06-01 user3526

我尝试了html2canvas.js和rasterizeHTML.js以实现一段html的可视化。虽然两者都有一些问题。 html2canvas.js无法通过具有变换的元素（例如，带有CSS缩放变换的文本）。只要我不能让rasterizeHTML.js在显示html的画布内绘制画布。

来源

2013-08-22 17:01:57

主要区别在于Rasterize是围绕SVG foreignObject的包装，而html2canvas本质上是从头开始重新实现浏览器HTML呈现。 Rasterize需要处理很多安全问题，但我认为它的方法更好，正如其对于html2canvas 2400只有950行代码所暗示的那样。

如果您渲染的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;

来源

2014-10-18 06:51:17

什么html2canvas和rasterizehtml.js

回答

相关问题