这个问题的关键是如何把div转换成canvas,下面介绍一下我所知道的两种方法的简单实现
工具/原料
chrome
html2canvas
方法/步骤
1、先去git或随便哪里下载html2canvas,这个东西好用且强大。
2、核心代码很简单html2canvas($("#content"拘七呷憎),{onrendered:function(canvas){惺绅寨瞀document.body.appendChild(canvas);}});如果要保存,或是其它操作可以写在function中
3、现螅岔出礤在在页面上加一个简单的div<divid=contentstyle="width:150px;height:150px;border:1pxlightbl锇栀劐箨uesolid"><span>Helloworld</span><br><span><h2>Areyouhearme?!</h2></span></div>再加一个save按钮
4、全部代码如下图
5、点击save按钮,就可以看到一个和div一模一样的canvas出现在下方
6、如果希望保存成image,推荐一个好用的插件canvas2imageCanvas2Image.saveAsPNG(canvas);即可
7、那html2canvas是如何做到的呢?丝群闻栝html是无法转换成canvas的,所以它应该是先转换成svg,然后再把s即枢潋雳vg转换成canvas(我并没有仔细阅读源码,这部分是个人的猜测)接下来介绍一种直接把dom转成svg,然后在通过svg转换成canvas的方法。不过这里只提供一个思路,例子本身毛病挺多的,主要用到的是svg中的foreignObject
8、所有页面代码如下,在浏览器上运行后可以看到,<foreignObject>中的内容以canvas的形式出现在了页面上