什麼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

回答

相關問題