105 lines
2.1 KiB
Plaintext
105 lines
2.1 KiB
Plaintext
<template>
|
|
<div style="width: 100%;height: 100%;position: relative">
|
|
<video
|
|
v-if="videoSrc"
|
|
id="video"
|
|
:src="videoSrc"
|
|
style="position: relative;z-index: 10;width: 100%;height:calc(100% - 50px)"
|
|
controls
|
|
crossorigin="anonymous"
|
|
/>
|
|
<div style="text-align: right">
|
|
<el-button size="small" type="primary" @click="jietu">截图</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
videoSrc: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
},
|
|
fileName: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isDisabled: false,
|
|
imgList: [],
|
|
fileObj: null,
|
|
videoList: [],
|
|
file: null,
|
|
dataBuffer: null,
|
|
percentage: 0,
|
|
isVideoToMp4: false,
|
|
isNeedToMp4: false
|
|
}
|
|
},
|
|
watch: {
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
jietu() {
|
|
this.screenShot('video')
|
|
},
|
|
screenShot(id) {
|
|
var player = document.getElementById(id)
|
|
console.log(player)
|
|
var canvas = document.createElement('canvas')
|
|
var img = document.createElement('img')
|
|
canvas.width = player.videoWidth
|
|
canvas.height = player.videoHeight
|
|
canvas.getContext('2d').drawImage(player, 0, 0, canvas.width, canvas.height)
|
|
var dataURL = canvas.toDataURL('image/png')
|
|
img.src = dataURL
|
|
img.width = player.clientWidth
|
|
img.height = player.clientHeight
|
|
img.style.objectFit = 'contain'
|
|
console.log(dataURL)
|
|
this.downFile(dataURL, `截图${new Date().getTime()}.png`)
|
|
},
|
|
downFile(data, fileName) {
|
|
var save_link = document.createElementNS(
|
|
'http://www.w3.org/1999/xhtml',
|
|
'a'
|
|
)
|
|
save_link.href = data
|
|
save_link.download = fileName
|
|
var event = document.createEvent('MouseEvents')
|
|
event.initMouseEvent(
|
|
'click',
|
|
true,
|
|
false,
|
|
window,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
false,
|
|
false,
|
|
false,
|
|
false,
|
|
0,
|
|
null
|
|
)
|
|
save_link.dispatchEvent(event)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|