# html生成圖片
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
}
.test{
width: 100px;
height: auto;
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">
asdfa asdfadsf sdf
</div>
<br>
<input type="button" name="" value="點擊生成" onclick="createImg()">
<img src="" class="src">
<script src="html2canvas.js"></script>
<script>
//直接選擇要截圖的dom，就能截圖，但是因為canvas的原因，生成的圖片模糊
/*html2canvas(document.querySelector('div')).then(function(canvas) {
document.body.appendChild(canvas);
})*/
function createImg(){
//創建一個新的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());
document.querySelector(".src").setAttribute('src',canvas.toDataURL());
});
}
</script>
</body>
</html>
~~~
原文：https://www.cnblogs.com/cjh1111/p/7133838.html
