本來需求是直接通過獲取富文本編輯器里的內(nèi)容，保存為圖片的亥曹，但是因?yàn)樽约杭夹g(shù)水的問題吧邓了，只能折中，將富文本編輯器里的內(nèi)容保存到html頁面媳瞪，再將指定的區(qū)域內(nèi)容保存為圖片骗炉。因?yàn)楸救说男枨髢H僅是對表格及其內(nèi)容進(jìn)行轉(zhuǎn)換操作，沒有涉及太多東西蛇受。
demo效果圖如下：
image.png
1.富文本編輯器用的是KindEditor（http://kindeditor.net/doc.php）句葵，按照官網(wǎng)步驟將富文本顯示出來，這里不做介紹。
2.使用的到的插件有html2canvas.js乍丈，canvas2image.js剂碴，base64.js，可以自己到github去下載轻专。
3.說明
- html2canvas忆矛，目前該插件還在開發(fā)中，暫不支持帶有圖片的div轉(zhuǎn)換请垛。圖片會(huì)被忽略
- 對一些的默認(rèn)樣式的支持可能不那么盡如人意催训，建議自己定義樣式,
- 不支持iframe
- 不支持跨域圖片
- 不能在瀏覽器插件中使用
- 部分瀏覽器上不支持SVG圖片
- 不支持Flash
- 不支持古代瀏覽器和IE，如果你想確認(rèn)是否支持某個(gè)瀏覽器宗收，可以用它訪問 http://deerface.sinaapp.com/ 試試
整個(gè)案例具體代碼如下：
html:
<textarea id="editor_id" name="content" style="width:700px;height:300px;" placeholder="請輸入內(nèi)容"></textarea>
<button onclick="save()">將富文本編輯器里的內(nèi)容提取到頁面指定的容器中</button>
<button onclick="example1()">將容器中的內(nèi)容轉(zhuǎn)成圖片</button>
<!--頁面中存放內(nèi)容的容器-->
<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節(jié)點(diǎn)轉(zhuǎn)成Canvas和圖片的js-->
<script src="../js/html2canvas.js"></script>
<script src="../js/canvas2image.js"></script>
<script src="../js/base64.js"></script>
<script>
//富文本編輯器設(shè)置（具體參考# [編輯器初始化參數(shù)](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);
// 同步數(shù)據(jù)后可以直接取得textarea的value
editor.sync();
//將富文本編輯器里的內(nèi)容提取到頁面指定的容器中
function save() {
var html = editor.html();
var showContent = document.getElementById('showContent');
showContent.innerHTML = html;
}
//設(shè)置一個(gè)變量保證生成圖片ID的唯一
var timestamp;
//保存生成圖片的ID值
var valueId = $('input').val();
//將容器中的內(nèi)容轉(zhuǎn)成圖片
function example1() {
//將富文本編輯器里的內(nèi)容提取到頁面指定的容器中
var html = editor.html();
$('#showContent').html(html);
//獲取當(dāng)前時(shí)間戳作為圖片ID的唯一值
timestamp = Date.parse(new Date());
//啟用此條則只截取指定區(qū)域的圖
html2canvas($('#showContent'), {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
var PicId = "picId" + timestamp;
//保證只有一張圖片生成
if(valueId){
$('img').remove();
valueId = PicId;
}else{
valueId = PicId;
}
//生成base64圖片數(shù)據(jù)
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
newImg.id = valueId;
//添加生成的圖片
document.body.append(newImg);
}
});
}
</script>
