订阅如何利用javascript保存浏览器div内容为图片
来源：网络收集 点击： 时间：2024-05-18先去git或随便哪里下载html2canvas,这个东西好用且强大。
2/8核心代码很简单
html2canvas($(#content), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
如果要保存，或是其它操作可以写在function中
3/8现在在页面上加一个简单的div
div id=content style=width:150px;height:150px;border:1px lightblue solid
spanHello world/span
br
spanh2Are you hear me?!/h2/span
/div
再加一个save按钮
4/8全部代码如下图
5/8点击save按钮，就可以看到一个和div一模一样的canvas出现在下方
6/8如果希望保存成image，推荐一个好用的插件canvas2image
Canvas2Image.saveAsPNG(canvas); 即可
7/8那html2canvas是如何做到的呢？html是无法转换成canvas的，所以它应该是先转换成svg，然后再把svg转换成canvas（我并没有仔细阅读源码，这部分是个人的猜测）
接下来介绍一种直接把dom转成svg，然后在通过svg转换成canvas的方法。不过这里只提供一个思路，例子本身毛病挺多的，主要用到的是svg中的foreignObject
8/8所有页面代码如下，在浏览器上运行后可以看到，foreignObject中的内容以canvas的形式出现在了页面上
注意事项html2canvas不支持低版本浏览器
javascript版权声明：
1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。
2、本站仅提供信息发布平台，不承担相关法律责任。
3、若侵犯您的版权或隐私，请联系本站管理员删除。
4、文章链接：http://www.1haoku.cn/art_795476.html
