<html>
<head></head>
<body>
<input type='file' />
<script src='./index.js' type='module'></script>
</body>
</html>
const input = document.querySelector('input[type=file]');
input.onchange = async(e) =>{
const file = e.target.files[0];
const result = await getCaptureFrame(file,8);
console.log(' %c👧👧param:"result"; lines:"7"::', 'color:#97c262;', result)
}
const getCaptureFrame = (file,time) =>{
return new Promise((resolve, reject) => {
const video = document.createElement('video');
video.currentTime = time;
video.muted = true;
video.autoplay = true;
video.src = URL.createObjectURL(file);
video.oncanplay = () => {
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const cts = canvas.getContext('2d')
cts.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
resolve({
url,
blob
});
});
}
})
}