js截图及绕过服务器图片保存至本地（html2canvas）
Posted 无敌小坑笔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js截图及绕过服务器图片保存至本地（html2canvas）相关的知识，希望对你有一定的参考价值。
今天要分享的是用html2canvas根据自己的需求生成截图，并且修复html2canvas截图模糊，以及绕过服务器图片保存至本地。
只需要短短的几行代码，就能根据所需的dom截图，是不是很方便，但是生成的图片模糊
//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
html2canvas(document.querySelector(‘div‘)).then(function(canvas) {
document.body.appendChild(canvas);
})
常见的解决方案是，生成一个多倍的画布，然后将其放在较小的容器内，这样就解决了截屏模糊的尴尬。
还有一个问题是怎么将图片绕过服务器保存至本地，canvas有个toDataURL的方法，然后a标签有个download属性，感觉简直天造之和。当然微信中屏蔽下载，可以借助微信的webview中的一个内置规则，只要是a标签(不含href属性)里面嵌套Img的，可以正常呼出保存至手机和分享给朋友的菜单栏。
以下是简单的demo
<!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>
以上是关于js截图及绕过服务器图片保存至本地（html2canvas）的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript进阶 九 JS实现本地文件上传至阿里云服务器
网页保存为图片及高清截图的优化 | canvas跨域图片配置