本来需求是直接通过获取富文本编辑器里的内容，保存为图片的，但是因为自己技术水的问题吧，只能折中，将富文本编辑器里的内容保存到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:
<textarea id="editor_id" name="content" style="width:700px;height:300px;" placeholder="请输入内容"></textarea>
<button onclick="save()">将富文本编辑器里的内容提取到页面指定的容器中</button>
<button onclick="example1()">将容器中的内容转成图片</button>
<!--页面中存放内容的容器-->
<div style="width:600px;height: 200px;border:1px solid #000;margin-top:10px;padding:5px;">
<div id="showContent"></div>
</div>
图片显示：
<br>
<input type="text" value="" hidden="hidden">
script:
<script src="../js/jquery.min.js"></script>
<!--富文本编辑器需要引入的js文件-->
<script src="kindeditor.js"></script>
<script src="lang/zh_CN.js"></script>
<!--将html节点转成Canvas和图片的js-->
<script src="../js/html2canvas.js"></script>
<script src="../js/canvas2image.js"></script>
<script src="../js/base64.js"></script>
<script>
//富文本编辑器设置（具体参考# [编辑器初始化参数](http://kindeditor.net/docs/option.html#id60)
）
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
//配置编辑器的工具栏
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
]
});
});
var editor = K.create('textarea[name="content"]', options);
// 同步数据后可以直接取得textarea的value
editor.sync();
//将富文本编辑器里的内容提取到页面指定的容器中
function save() {
var html = editor.html();
var showContent = document.getElementById('showContent');
showContent.innerHTML = html;
}
//设置一个变量保证生成图片ID的唯一
var timestamp;
//保存生成图片的ID值
var valueId = $('input').val();
//将容器中的内容转成图片
function example1() {
//将富文本编辑器里的内容提取到页面指定的容器中
var html = editor.html();
$('#showContent').html(html);
//获取当前时间戳作为图片ID的唯一值
timestamp = Date.parse(new Date());
//启用此条则只截取指定区域的图
html2canvas($('#showContent'), {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
var PicId = "picId" + timestamp;
//保证只有一张图片生成
if(valueId){
$('img').remove();
valueId = PicId;
}else{
valueId = PicId;
}
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
newImg.id = valueId;
//添加生成的图片
document.body.append(newImg);
}
});
}
</script>
