JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<input type="file" name="" id="upload"><br>
<video src="" id="video" controls width="300"></video>
<br>
<button id="capture">截个封面</button><br>
<img src="" id="cover" width="300">
<hr>
<input type="file" name="" id="upload2" width="300"><br>
<img src="" id="img">

JavaScript

const URL = window.URL || window.webkitURL

$('#upload').on('change', function() {
	if(!this.files.length) return
	const url = URL.createObjectURL(this.files[0])
	$('#video').attr('src', url)
})

$('#upload2').on('change', function() {
	if(!this.files.length) return
	const url = URL.createObjectURL(this.files[0])
	$('#img').attr('src', url)
})

$('#capture').click(function() {
	const canvas = document.createElement("canvas")
  const w = video.videoWidth
  const h = video.videoHeight
  canvas.width = w
  canvas.height = h
  canvas.getContext('2d').drawImage($('#video')[0], 0, 0, w, h)
  $('#cover').attr('src', canvas.toDataURL())
})