本文章我们介绍两种技术，一个是html2canvas，他可以将DOM转换为canvas，从而可以用canvas的方法获得图片，
也就是说可以使用html2canvas实现根据DOM的截图。另一个是FileSaver，他可以将图片文件（blod对象或file对象）下
载到本地。
1、html2canvas（这是个库，需要下载）
下载链接：html2canvas.js
或者使用npm installhtml2canvas下载
使用语法：html2canvas ( target, options ).then ( canvas => { 回调函数内容 } )
target：需要截图的DOM
options：配置项，下面会详细介绍
.then(canvas => {回调})：canvas表示DOM转换为canvas对象之后的canvas对象，回调里面可以针对这个canvas对象进行
各种操作，比如生成图片，比如下载图片
2、FileSaver（这个也是个库，也需要下载）
下载链接：FileSaver.js
或者使用npm install FileSaver下载
使用语法：saveAs(obj, name)
obj：需要下载的文件
name：下载文件的名字
话不多说，直接上demo：
首先引入两个库：
<script src="./FileSaver.js"></script>
<script src="./html2canvas.js"></script>
css代码：
<style>
.box {
position: relative;
padding: 0 10px;
box-sizing: border-box;
width: 375px;
height: 537px;
background: url('http://file.40017.cn/appresource/propublic/TCdesign/bg_complate.png') no-repeat;
background-size: 100%;
}
img {
width: 100%;
margin-top: 180px;
border-radius: 15px;
}
</style>
html代码：
<!-- box就是我们需要截图的DOM，box的背景图连同里面img标签展示的图片都会被截下来 -->
<div class="box">
<img src="http://file.40017.cn/appresource/propublic/TCdesign/bg_banner_new.png">
</div>
<button onclick="download()">下载</button>
<!-- 这个img标签用于展示截图后的图片 -->
<img src="" class="show" width="375px">
js代码（看起来很多，但是多为注释，注释都是教学内容）：
<script>
// 目标截图的DOM
let target = document.querySelector(".box");
// 截图展示的DOM
let showImg = document.querySelector('.show')
// 下载按钮的回调函数，里面的逻辑就是实现截图的过程
function download() {
/*
把截图逻辑放在setTimeout里是怕点击按钮时DOM还没加载完
因为DOM里的背景图或者img标签图片可能是使用的链接，是异步的
*/
setTimeout(() => {
html2canvas(target, {
allowTaint: true, // 允许跨域图片
useCORS: true // 开启跨域配置
}).then(canvas => {
// canvas代表目标DOM生成的canvas对象
/*
截图展示方法1：canvas.toDataURL()
语法：canvas.toDataURL(type, encoderOptions);
参数：
type（可选）：图片格式，默认为 image/png
encoderOptions（可选）：在指定图片格式为 image/jpeg 或 image/webp 的情况下，
可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
*/
// let imgurl = canvas.toDataURL()
// showImg.setAttribute('src', imgurl)
// showImg.style.width = '375px'
/*
截图展示方法2：canvas.toBlob()
语法：canvas.toBlob(callback, type, quality)
参数：
callback：回调函数，可获得一个单独的Blob对象参数。如果图像未被成功创建，可能会获得 null 值。
type（可选）：DOMString 类型，指定图片格式，默认格式（未指定或不支持）为 image/png。
quality（可选）：Number 类型，值在 0 与 1 之间，当请求图片格式为 image/jpeg 或者 image/webp 时
用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。
*/
canvas.toBlob((blob) => {
/*
URL.createObjectURL()方法接收一个参数，参数类型为blob对象或file对象，可以将
blob对象或file对象转变为一个url
*/
// 获取截图的url
let imgurl = URL.createObjectURL(blob)
// 展示截图
showImg.setAttribute('src', imgurl)
showImg.style.width = '375px'
/*
saveAs()方法接收两个参数，第一个是一个blob对象或file对象，第二个是下载之后下载文件的名称
*/
// 下载截图
saveAs(blob, "HomeMid.png")
})
});
}, 500)
}
</script>
