将html或者div转换为图片

转载出处：https://blog.csdn.net/huwei2003/article/details/79761580

我想实现这样的功能：在一个页面展示多个html页面的图片

看到一个有用的博客，特此记录一下，以备后用

 

今天要分享的是用html2canvas根据自己的需求生成截图，并且修复html2canvas截图模糊，以及绕过服务器图片保存至本地。　　

只需要短短的几行代码，就能根据所需的dom截图，是不是很方便，但是生成的图片模糊
//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
         

  html2canvas(document.querySelector('div')).then(function(canvas) {
                    document.body.appendChild(canvas);
             })

　　
   常见的解决方案是，生成一个多倍的画布，然后将其放在较小的容器内，这样就解决了截屏模糊的尴尬。

 还有一个问题是怎么将图片绕过服务器保存至本地，canvas有个toDataURL的方法，然后a标签有个download属性，感觉简直天造之和。当然微信中屏蔽下载，可以借助微信的webview中的一个内置规则，只要是a标签(不含href属性)里面嵌套Img的，可以正常呼出保存至手机和分享给朋友的菜单栏。

下面是我参考之后自己写的例子，html2canvas.min.js文件的下载地址：http://www.bootcdn.cn/html2canvas/

    
    
    
    
    




测试
测试


下载

下载2