将html保存为png图片(html2canvas.js，canvas2image.js)

本来需求是直接通过获取富文本编辑器里的内容，保存为图片的，但是因为自己技术水的问题吧，只能折中，将富文本编辑器里的内容保存到html页面，再将指定的区域内容保存为图片。因为本人的需求仅仅是对表格及其内容进行转换操作，没有涉及太多东西。

demo效果图如下：

image.png

1.富文本编辑器用的是KindEditor（http://kindeditor.net/doc.php），按照官网步骤将富文本显示出来，这里不做介绍。

2.使用的到的插件有html2canvas.js，canvas2image.js，base64.js，可以自己到github去下载。

3.说明

• html2canvas，目前该插件还在开发中，暂不支持带有图片的div转换。图片会被忽略
• 对一些的默认样式的支持可能不那么尽如人意，建议自己定义样式,
• 不支持iframe
• 不支持跨域图片
• 不能在浏览器插件中使用
• 部分浏览器上不支持SVG图片
• 不支持Flash
• 不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问 http://deerface.sinaapp.com/ 试试

整个案例具体代码如下：
html:

将富文本编辑器里的内容提取到页面指定的容器中
将容器中的内容转成图片


    



图片显示：

script: