- 下载依赖
npm install html2canvas --save
- 完整代码
<template>
<div class="home">
<div class="inv_box" ref="imageTofile">
QQQQQQQQQQ
</div>
<el-button @click="screenshot" >截图</el-button>
</div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
name: "home",
data() {
return {
ezvizPlay: null,
};
},
components: {},
props: {},
watch: {},
computed: {},
mounted() {},
methods: {
screenshot(){
const canvas = document.createElement("canvas")
let canvasBox = this.$refs.video
const width = parseInt(window.getComputedStyle(canvasBox).width)
const height = parseInt(window.getComputedStyle(canvasBox).height)
canvas.width = width * 2
canvas.height = height * 2
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const context = canvas.getContext("2d");
context.scale(2, 2);
const options = {
backgroundColor: null,
canvas: canvas,
useCORS: true
}
html2canvas(canvasBox, options).then((canvas) => {
let dataURL = canvas.toDataURL("image/png")
this.downloadImage(dataURL,'baocun')
})
},
downloadImage(url,name) {
let a = document.createElement('a')
a.href = url
a.download = name
a.click()
},
}
};
</script>
<style lang="scss" scoped>
</style>
- 效果图