如何利用javascript保存浏览器div内容为图片

1、先去git或随便哪里下载html2canvas,这个东西好用且强大。

2、核心代码很简单

html2canvas($("#content"), {

                onrendered: function(canvas) {

                    document.body.appendChild(canvas);

                }

});

如果要保存，或是其它操作可以写在function中

3、现在在页面上加一个简单的div

<div id=content style="width:150px;height:150px;border:1px lightblue solid">

    <span>Hello world</span>

    <br>

    <span><h2>Are you hear me?!</h2></span>

</div>

再加一个save按钮

4、全部代码如下图

5、点击save按钮，就可以看到一个和div一模一样的canvas出现在下方

6、如果希望保存成image，推荐一个好用的插件canvas2image

 Canvas2Image.saveAsPNG(canvas); 即可

7、那html2canvas是如何做到的呢？html是无法转换成canvas的，所以它应该是先转换成svg，然后再把svg转换成canvas（我并没有仔细阅读源码，这部分是个人的猜测）

接下来介绍一种直接把dom转成svg，然后在通过svg转换成canvas的方法。不过这里只提供一个思路，例子本身毛病挺多的，主要用到的是svg中的foreignObject

8、所有页面代码如下，在浏览器上运行后可以看到，<foreignObject>中的内容以canvas的形式出现在了页面上