将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:

<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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容