這個其實是在做上一篇需求的時候先做出來的，但是由于某些原因不符合需求，所以這個就當做練習弄出來了笆搓。

demo效果圖如下：

image.png

注意點跟上一篇[http://www.reibang.com/p/651c786dd81f]是一樣的，這里不做介紹。

直接上代碼：
html:

<textarea id="editor_id" name="content" style="width:700px;height:300px;" placeholder="請輸入內(nèi)容"></textarea>

<button onclick="save()">將富文本編輯器里的內(nèi)容提取到頁面指定的容器中</button>
<button onclick="btnSave()">轉(zhuǎn)成圖片</button>

<div id="image" style="display: none;"></div>
<div style="width:600px;height: 200px;border:1px solid #000;margin-top:10px;padding:5px;">
    <div id="showContent" style="width:100%;height:100%"></div>
</div>

script:

<script src="../js/jquery.min.js"></script>
    <script src="kindeditor.js"></script>
    <script src="lang/zh_CN.js"></script>
<script src="../js/jsPdf.debug.js"></script>
<script src="../js/html2canvas.js"></script>
    <script src="../js/canvas2image.js"></script>
    <script src="../js/base64.js"></script>

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"]');

 // 同步數(shù)據(jù)后可以直接取得textarea的value
    editor.sync();

function save() {
        var html = editor.html();
        var showContent = document.getElementById('showContent');
        showContent.innerHTML = html;
    }

function btnSave() {
        /*生成canvas圖形*/

        // 獲取內(nèi)容id
        var content = document.getElementById("showContent");
        // 進行canvas生成

        html2canvas(content, {
            onrendered: function (canvas) {
              
                timestamp = Date.parse(new Date());
                thecanvas = "thecanvas" + timestamp
                //添加屬性
                canvas.setAttribute('id', thecanvas);
                //讀取屬性值
                // var value= canvas.getAttribute('id');
                //將生成的canvas放入指定的div中
                document.getElementById('image').appendChild(canvas);
            }

        });
        //下載
        Download(thecanvas);
    }

    function Download(thecanvas) {

        var oCanvas = document.getElementById(thecanvas);

        /*自動保存為png*/
        // 獲取圖片資源
        var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
        //                saveFile(img_data1);
        //     保存文件函數(shù)

        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = img_data1;
        save_link.download = thecanvas;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);

        /*下面的為原生的保存噪径，不帶格式名*/
        // 這將會提示用戶保存PNG圖片
        //             Canvas2Image.saveAsPNG(oCanvas);

    }