feat: 添加导出当前帧

wangrongding · May 2, 2024 · 11a2d55 · 11a2d55
1 parent 2b6c99d
commit 11a2d55
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/src/components/left-panel/VideoList.vue b/src/components/left-panel/VideoList.vue
@@ -31,16 +31,17 @@ const pause = (e: MouseEvent) => {
 }
 
 // TODO 后续通过请求获取
+// https://www.pexels.com/zh-cn/videos/
+// https://pixabay.com/videos/
 const videoList = [
   movie,
-  'https://video.qiantucdn.com/58pic/00/20/21/09958PIC6FViKhIpXZgUj.mp4?e=1713729837&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:g-ONc7Uje6p1939AOm0wRDYeiF8=',
-  'https://video.qiantucdn.com/58pic/00/20/23/02558PICNTpFqK4ncBJnV.mp4?e=1713729429&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:D94qjqaQseKIaqFePl36W3tIC-M=',
-  'https://video.qiantucdn.com/58pic/00/20/23/06658PICsC8W4kNsdPzcI.mp4?e=1713729432&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:QXmhagSADXtwS87wrf2XiptAsBw=',
-  'https://video.qiantucdn.com/58pic/00/20/23/11658PICbQzU5x2Y6ADcv.mp4?e=1713730089&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:Ja6iObmjMEe4tp7HGtkf0tNg2GU=',
-  'https://video.qiantucdn.com/58pic/00/20/24/04658PICWYteCdFtdPPny.mp4?e=1713730149&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:FMPXA6eKGdR1_SqzD0c3YOfXBu0=',
-  'https://video.qiantucdn.com/58pic/00/20/23/06g58PICCvcu5xjRX2558PICT.mp4?e=1713730152&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:wsPzjgOkr2yC64gl30pTGesc5pg=',
-  'https://video.qiantucdn.com/58pic/00/20/22/11q58PICTnUEjWVj2D6yb.mp4?e=1713730156&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:hHaECUSzDGWAdYmXEztiYdvYKwY=',
-  'https://video.qiantucdn.com/58pic/00/20/22/05x58PICKJHMvIwecZ7ph.mp4?e=1713728624&token=OyzEe_0O8H433pm7zVEjtnSy5dVdfpsIawO2nx3f:PPCmMoKn42iTu-3LFm-PrIU8NcM='
+  'https://videos.pexels.com/video-files/6278954/6278954-uhd_2160_3840_30fps.mp4',
+  'https://videos.pexels.com/video-files/4068362/4068362-uhd_4096_2160_25fps.mp4',
+  'https://videos.pexels.com/video-files/15921892/15921892-uhd_3840_2160_50fps.mp4',
+  'https://videos.pexels.com/video-files/20497210/20497210-sd_640_360_25fps.mp4',
+  'https://cdn.pixabay.com/video/2024/04/28/209762_large.mp4',
+  'https://cdn.pixabay.com/video/2024/04/29/209898_large.mp4',
+  'https://cdn.pixabay.com/video/2024/04/23/209108_large.mp4'
 ]
 </script>
 <template>

diff --git a/src/components/player/CanvasPlayer.vue b/src/components/player/CanvasPlayer.vue
@@ -46,6 +46,7 @@ emitter.on(BusEvent.ElementAdd, onAdd)
 emitter.on(BusEvent.ElementAlign, setElementAlign)
 emitter.on(BusEvent.ElementLayer, setElementLayer)
 emitter.on(BusEvent.CanvasFullScreen, toggleCanvasFullScreen)
+emitter.on(BusEvent.CanvasExportCurrentFrame, onExportCurrentFrame)
 emitter.on(BusEvent.VideoSkip, (time: number) => (videoRef.currentTime += time))
 
 watch(playStatus, (v) => videoRef[v ? 'play' : 'pause']())
@@ -164,6 +165,7 @@ async function drawVideo(url: string) {
   videoRef.src = url
   videoRef.loop = true
   videoRef.preload = 'auto' // 不加会导致未播放时元素黑屏
+  videoRef.crossOrigin = 'anonymous' // 跨域的视频会污染画布，导致无法导出
 
   await new Promise<void>((resolve) => {
     videoRef.addEventListener('loadedmetadata', () => {
@@ -405,6 +407,23 @@ function toggleCanvasFullScreen(fullscreen?: boolean) {
   }
 }
 
+// 导出图片
+function onExportCurrentFrame() {
+  const dataURL = canvas.toDataURL({
+    width: canvas.width,
+    height: canvas.height,
+    left: 0,
+    top: 0,
+    format: 'png'
+  })
+  const link = document.createElement('a')
+  link.download = 'canvas.png'
+  link.href = dataURL
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
 // 复制元素
 function onCopy() {
   const activeObject = canvas.getActiveObject()