HTML导出图片如何实现?

0 0

HTML导出图片如何实现?5

最近在考虑将HTML片段,或直接就是某个DOM节点,将该DOM节点导出为图片的形式,现在能想到的方式有如下两种:

1. 前台通过js获取DOM节点的style属性,如width,height,margin等影响节点布局的属性值,并将这些值放到节点中.再将该DOM传回到后台,在后台有能够解析HTML(片段)的代码,由该代码将该DOM的所呈现的样式画出来.
    这种方式目前一个叫flyingsaucer的java包可以较好地实现,该包主要是将HTML导出为PDF,而且其能解析css,可谓功能相当强大,而且改成导出为图片应该也不是复杂的事.
    但是该方法也存在一些问题,如不同的浏览器对HTML的解析结果并不是完全一样的,导出的图片可能与前台所看到的效果并不完全一致;另外一个问题是它不能解析flash对象,要解析的话,估计得装上flash相关的解释器了,这个是主要的麻烦.

2. 最佳的方案是,从前台通过js或浏览器插件获取到某个点的像素值,将DOM节点的所要像素值获取到后传到后台,由后台解析成图片等.但是该方案并没有一个完全行得通的实现.通过研究FireFox上的插件Rainbow,发现FireFox中有一个方法drawWindow能够将某个DOM节点在canvas中重新绘制,再通过canvas的getImageData方法获取到某点或所有点的像素值.但是出于安全的考虑drawWindow方法并不能直接在页面中通过js调用.该方法几乎算是最好的方式了,能够解决所有的问题,但是实现起来就不那么轻松了.
    Rainbow中的方法:

Html代码 



 
getWindowPixel : function(win, x, y) {  
    var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');  
    canvas.width = 1;  
    canvas.height = 1;  
    var context = canvas.getContext("2d");  
  
    context.drawWindow(win, x, y, 1, 1, "white");  
    var data = context.getImageData(0, 0, 1, 1).data;  
    return "rgb(" + data[0] + "," + data[1] + "," + data[2] + ")";  
}  
   