html2canvas 将图片转为png,将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:

//富文本