互联网网站 有哪些,站长统计 wordpress,网站301如何做,四川百度推广排名查询思路#xff0c;用video播放视频到某一秒#xff0c;之后用canvas把video画成一张图片#xff0c;从而在客户端得到视频关键帧图片#xff0c;实现还有一些细节处理
!DOCTYPE html
html langenheadmeta charsetUTF-8…思路用video播放视频到某一秒之后用canvas把video画成一张图片从而在客户端得到视频关键帧图片实现还有一些细节处理
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle/style/headbodyinput classinput typefile /div classlist/div/bodyscriptfunction captureKeyFrame(file, time 0) {return new Promise((resolve) {const url URL.createObjectURL(file);const video document.createElement(video);video.width 150;video.height 200;video.src url;video.currentTime time;video.muted true;video.autoplay true;video.oncanplay async function () {const frame await drawVideo(video);resolve(frame);};});}/*** description: 用canvas把video画成一张图片* param {*} video* return {*}{ blob: , url: } blob时上传的资源url是本地资源地址*/function drawVideo(video) {return new Promise((resolve) {const canvas document.createElement(canvas);canvas.width video.width;canvas.height video.height;const ctx canvas.getContext(2d);ctx.drawImage(video, 0, 0, canvas.width, canvas.height);canvas.toBlob((blob) {resolve({blob,url: URL.createObjectURL(blob),});});});}/scriptscriptconst input document.querySelector(.input);const list document.querySelector(.list);input.onchange async function (event) {// 清空上一文件的关键帧图片list.innerHTML ;const file event.target.files[0];for (let i 0; i 10; i) {const frame await captureKeyFrame(file, i * 1);createPreview(frame);}};const createPreview function (frame) {const img new Image();img.src frame.url;list.appendChild(img);};/script
/html
