html5 js 关系,html5 – html2canvas和rasterizehtml.js之间的区别

主要区别在于Rasterize是

SVG foreignObject左右的包装器,而html2canvas本质上是从头开始重新实现浏览器HTML呈现. Rasterize必须处理很多安全问题,但我认为它的方法更好,正如html2canvas 2400只有950行代码所示.

如果您渲染的HTML不是很复杂或者不需要像素完美,那么您可以跳过Rasterize并直接使用foreignObject,如MDN: Drawing DOM objects into a canvas所述：

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var data = '' +

'' +

'

' +

'I like cheese' +

'

' +

'' +

'';

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;