1.html2canvas的引入；官方文档地址html2canvas.hertzen.com/getting-sta…
在vue项目里安装
npm install --save html2canvas 或者 yarn add html2canvas
组件里引入使用
import html2canvas from 'html2canvas';
2.本人在这里直接在Html里创建vue实例演示的，直接看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>zidong</title>
</head>
<body>
<div id="app" ref="imageTofile">
<div style="background-color: #fff">
<div>
<button @click="startDown()">捕获整个页面</button>
</div>
<div>文字，图片等内容</div>
<img :src="img" alt="" style="width: 300px" />
<img :src="img" alt="" style="width: 300px" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
</script>
<script>
var app = new Vue({
el: "#app",
data: {
img: "https://img.zcool.cn/community/01d6d35d5222bfa8012187f4977767.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100"
},
mounted() {},
methods: {
startDown() {
window.confirm("是否开始下载？")
? this.toImage()
: () => {
return window.alert("失败了");
};
},
toImage() {
// imageTofile是给截图范围内的父级元素自定义的ref名称
let canvasBox = this.$refs.imageTofile;
let width = canvasBox.offsetWidth;
let height = canvasBox.offsetHeight;
const options = {
width,
height,
backgroundColor: "#000",
useCORS: true,
logging: false,
scale: 1 //设置放大的倍数
};
//使用html2canvas获取图片地址
html2canvas(canvasBox, options).then(canvas => {
let dataURL = canvas.toDataURL("image/png", 1);
this.downloadImage(dataURL);
});
},
//下载图片
downloadImage(url) {
// 如果是在网页中可以直接创建一个 a 标签直接下载
let a = document.createElement("a");
a.href = url;
a.download = "截图";
a.click();
}
}
});
</script>
</body>
</html>
