<body>
<div>
<div>
<input type="file" name="" id="myInput">
</div>
<video id="myVideo">
<source id="mySource"></source>
</video>
<div>
<button class="start">开始</button>
<button class="pause">暂停</button>
<button class="getImage">提取当前帧</button>
</div>
<div>
<canvas width="600" height="600" id="myCanvas"></canvas>
<div>
<button class="export">导出PNG</button>
</div>
</div>
</div>
</body>
script
let myInput = document.getElementById('myInput')
let myVideo = document.getElementById('myVideo')
let mySource = document.getElementById('mySource')
let myCanvas = document.getElementById('myCanvas')
// 上传视频文件并生成一个当前可访问url
myInput.onchange = (e) => {
let file = e?.target?.files[0]
if(!file) return
let url = URL.createObjectURL(file)
changeVideo(url)
}
// 切换播放视频
function changeVideo (url) {
// 暂停当前视频
myVideo.pause()
mySource.src = url
// 重新加载并播放
myVideo.load()
myVideo.paly()
}
// 截取当前视频帧并且渲染到canvas上
function getCurrentImage () {
let ctx = myCanvas.getContext('2d')
ctx.drawImage(myVideo, 0, 0)
let frameData = ctx.getImageData(0, 0, myCanvas.width, myCanvas.height)
return frameData
}
document.querySelector('.start').addEventListener('click', (e) => myVideo.play())
document.querySelector('.pause').addEventListener('click', (e) => myVideo.pause())
document.querySelector('.getImage').addEventListener('click', (e) => getCurrentImage())
document.querySelector('.export').addEventListener('click', (e) => {
let url = myCanvas.toDataURL('image/png')
let link = document.createElement('a')
link.download = 'myImage.png'
link.href = url
link.click()
link.remove()
})
