mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
2 lines
6.6 KiB
JavaScript
2 lines
6.6 KiB
JavaScript
var I=Object.defineProperty;var V=(c,t,s)=>t in c?I(c,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):c[t]=s;var a=(c,t,s)=>V(c,typeof t!="symbol"?t+"":t,s);import{e as b}from"./mitt-E5P-NQ8u.js";import{d as F,a as g,a2 as L,m as P,y as U,b as _,e as M,w as r,g as d,z as S,f as u,i as A,h as f,A as B,j as i,_ as z}from"./index-DI6gHrBb.js";class H{constructor(t){a(this,"canvas");a(this,"ctx");a(this,"images");a(this,"container");a(this,"positionX");a(this,"isDragging");a(this,"startX");a(this,"handleClick",t=>{this.drawTick(t)});a(this,"handleMouseDown",t=>{this.startDrag(t.clientX)});a(this,"handleMouseMove",t=>{this.drag(t.clientX)});a(this,"handleMouseUp",()=>{this.endDrag()});a(this,"handleTouchStart",t=>{t.touches.length===1&&(t.preventDefault(),this.startDrag(t.touches[0].clientX))});a(this,"handleTouchMove",t=>{t.touches.length===1&&(t.preventDefault(),this.drag(t.touches[0].clientX))});a(this,"handleTouchEnd",()=>{this.endDrag()});this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.images=[],this.positionX=0,this.isDragging=!1,this.startX=0,this.container=document.getElementById(t),this.container&&(this.container.appendChild(this.canvas),this.canvas.width=this.container.clientWidth,this.canvas.height=this.container.clientHeight)}addImage(t,s,n,o,v){const p=new Image;p.src=t,this.images.push({img:p,x:s,y:n,width:o,height:v}),this.render()}render(){this.clearRect(),this.images.forEach(t=>{const s=t.x+this.positionX;this.ctx.drawImage(t.img,s,t.y,t.width,t.height)})}clearImages(){this.images=[]}clearRect(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)}drawTick(t){this.render();const s=Math.ceil((Math.abs(this.positionX)+t.offsetX)/this.images[0].width)-1,n=t.offsetX,o=t.offsetY;this.ctx.strokeStyle="red",this.ctx.lineWidth=4,this.ctx.lineCap="round",this.ctx.beginPath(),this.ctx.moveTo(n-10,o),this.ctx.lineTo(n,o+10),this.ctx.lineTo(n+15,o-10),this.ctx.stroke(),b.emit("imageInfo",this.images[s])}addListener(){this.canvas&&(this.canvas.addEventListener("click",this.handleClick),this.canvas.addEventListener("mousedown",this.handleMouseDown),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseup",this.handleMouseUp),this.canvas.addEventListener("touchstart",this.handleTouchStart),this.canvas.addEventListener("touchmove",this.handleTouchMove),this.canvas.addEventListener("touchend",this.handleTouchEnd))}startDrag(t){this.canvas.style.cursor="grabbing",this.canvas.style.userSelect="none",this.startX=t,this.isDragging=!0}drag(t){if(!this.isDragging)return;const s=t-this.startX,n=this.images.length*this.images[0].width-this.container.clientWidth;this.positionX=Math.max(Math.min(this.positionX+s,0),-n),this.startX=t,this.render()}endDrag(){this.canvas.style.cursor="grab",this.canvas.style.userSelect="auto",this.isDragging=!1}}const W={VITE_PUBLIC_PATH:"/vue-pure-admin/"},j={class:"card-header"},N={class:"font-medium"},R={class:"flex flex-wrap"},G={id:"canvas-container","element-loading-text":"温馨提示：可左右拖拽图片并单击选取所需的帧图片",class:"w-full h-[200px] overflow-hidden mt-6"},m=200,Y=F({name:"VideoFrame",__name:"index",setup(c){const t=g(""),s=g(),n=g(),o=g(!1),{loadScript:v}=L(),{VITE_PUBLIC_PATH:p}=W,x=l=>`${p}wasm/${l}`,k=x("index.js"),T=x("capture.worker.js"),X=x("capture.worker.wasm");v({src:k}).then(l=>{l[0].message==="加载成功"&&(n.value=cheetahCapture.initCapture({workerPath:T,wasmPath:X}))}),P(()=>{s.value=new H("canvas-container"),b.on("imageInfo",l=>t.value=l.img.src)});function y(l){return t.value="",o.value=!0,s.value.clearImages(),n.value.then(e=>{e.capture({file:l,info:16,onChange:(h,{url:w})=>{s.value.addImage(w,m*h.url.length,0,m,m)},onSuccess:()=>{s.value.addListener(),s.value.drawTick({offsetX:m/2,offsetY:m/2}),o.value=!1},onError:()=>{o.value=!1}})}),!1}return U(()=>{b.off("imageInfo")}),(l,e)=>{const h=f("el-link"),w=f("el-upload"),E=f("el-image"),C=f("el-card"),D=B("loading");return M(),_(C,{shadow:"never"},{header:r(()=>[d("div",j,[d("span",N,[d("p",null,[e[1]||(e[1]=i(" 基于自定义编译 ")),u(h,{href:"https://github.com/FFmpeg/FFmpeg",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:r(()=>e[0]||(e[0]=[i(" FFmpeg ")])),_:1}),e[2]||(e[2]=i(" 的截帧工具，支持MP4、MOV、AVI、WebM、MKV等主流格式，支持 H.264（AVC）、H.265（HEVC）、MPEG-2、MPEG-4、VP8、VP9、WMV3编码格式 "))]),e[11]||(e[11]=i(" 当然还可以支持更多视频格式，只要FFmpeg支持的，按理都能支持，您也可参考 ")),u(h,{href:"https://github.com/wanwu/cheetah-capture",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:r(()=>e[3]||(e[3]=[i(" cheetah-capture ")])),_:1}),e[12]||(e[12]=i(" 和 ")),u(h,{href:"https://github.com/jordiwang/web-capture",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:r(()=>e[4]||(e[4]=[i(" web-capture ")])),_:1}),e[13]||(e[13]=i(" 修改并编译wasm等文件（强烈推荐在Ubuntu系统进行编译） ")),d("p",null,[e[6]||(e[6]=i(" mac系统推荐安装 ")),u(h,{href:"https://github.com/utmapp/UTM",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:r(()=>e[5]||(e[5]=[i(" UTM ")])),_:1}),e[7]||(e[7]=i(" 虚拟机，windows系统推荐安装VMware虚拟机 "))]),d("p",null,[e[9]||(e[9]=i(" 当然这只是一个视频帧截取工具，如果您想要更多操作可以研究下 ")),u(h,{href:"https://ffmpegwasm.netlify.app/",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:r(()=>e[8]||(e[8]=[i(" ffmpeg.wasm ")])),_:1}),e[10]||(e[10]=i(" ，它是基于 FFmpeg 的纯 WebAssembly / JavaScript 工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的 "))])]),u(h,{class:"mt-2",href:"https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video-frame",target:"_blank"},{default:r(()=>e[14]||(e[14]=[i(" 代码位置 src/views/able/video-frame ")])),_:1})])]),default:r(()=>[d("div",R,[u(w,{drag:"","show-file-list":!1,accept:".mp4,.mov,.avi,.webm,.mkv","before-upload":y},{default:r(()=>e[15]||(e[15]=[d("div",{class:"el-upload__text"}," 可拖拽上传视频（默认截取16张帧图片，可在代码中自行修改） ",-1)])),_:1}),t.value?(M(),_(E,{key:0,src:t.value,"preview-src-list":Array.of(t.value),class:"w-[180px] h-[180px] ml-2 rounded-[6px]"},null,8,["src","preview-src-list"])):A("",!0)]),S(d("div",G,null,512),[[D,o.value]])]),_:1})}}}),O=z(Y,[["__scopeId","data-v-427ed29b"]]);export{O as default};
|