html dom渲染成图片

html dom渲染成图片

http://html2canvas.hertzen.com/这个插件可以通过canvas将html元素带样式的完整渲染成图片。

在项目中遇到一个问题，因为table信息过多导致table宽度过宽，需要频繁滚动来展示信息时就会很麻烦。这时添加了一个功能将通过canvas将table渲染成图片供下载或新页面打开。
当需要渲染的element宽度不是很大时，渲染很正常。

例子：http://jsfiddle.net/mceyg7ky/

但是当element被嵌套在块中且它的大小过大无法完全展现时会出现截图截不全的问题.

例子：http://jsfiddle.net/mwtnrops/

试了很长时间找到了一个解决方法。因为只有html宽度足以显示element的时候，截图才可以很完整的截下来。所以，在截图前给element加样式强制element全部显示，当渲染完成时把样式取消。这时可以把element完整的截下来。

例子：http://jsfiddle.net/mwtnrops/3/