今天要分享的是用html2canvas根据自己的需求生成截图，并且修复html2canvas截图模糊，以及绕过服务器图片 保存至本地。
只需要短短的几行代码，就能根据所需的dom截图，是不是很方便，但是生成的图片模糊
?| 1 2 3 4 | //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊 html2canvas(document.querySelector( 'div')).then(function(canvas) { document.body.appendChild(canvas); }) |
常见的解决方案是，生成一个多倍的画布，然后将其放在较小的容器内，这样就解决了截屏模糊的尴尬。
还有一个问题是怎么将图片绕过服务器保存至本地，canvas有个toDataURL的方法，然后a标签有个download属性，感觉简直天造之和。当然微信中屏蔽下载，可以借助微信的webview中的一个内置规则，只要是a标签( 不含href属性)里面嵌套Img的，可以正常呼出保存至手机和分享给朋友的菜单栏。
以下是简单的demo
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></ title> <style> *{ margin: 0; } .test{ width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: #87CEEB; display: inline-block; vertical-align:top; } canvas{ margin-right: 5px; } .down{ float: right; margin: 40px 10px; } </style> </head> <body> <a class="down" href="" download="downImg">下载</ a> <div class="test">测试</div > <script src="js/html2canvas.js"></script > <script> //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊 html2canvas(document.querySelector('div')).then(function(canvas) { document.body.appendChild(canvas); }) //创建一个新的canvas var canvas2 = document.createElement("canvas"); let _canvas = document.querySelector('div'); var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height); //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了 canvas2.width = w * 2; canvas2.height = h * 2; canvas2.style.width = w + "px"; canvas2.style.height = h + "px"; //可以按照自己的需求，对context的参数修改,translate指的是偏移量 // var context = canvas.getContext("2d"); // context.translate(0,0); var context = canvas2.getContext("2d"); context.scale(2,2); html2canvas(document.querySelector('div'),{canvas:canvas2}).then(function(canvas) { document.body.appendChild(canvas); //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载 document.querySelector(".down").setAttribute('href',canvas.toDataURL()); }); </script> </body> </html> |
