From 11a2d550642422fd992848e803ffeb8edff48c8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=A3=E9=A1=B6?= <wangrongding@qq.com>
Date: Fri, 3 May 2024 04:13:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E5=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/left-panel/VideoList.vue | 17 +++++++++--------
 src/components/player/CanvasPlayer.vue  | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/left-panel/VideoList.vue b/src/components/left-panel/VideoList.vue
index cbbace6..6ea0d76 100644
--- 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
index 6624eaf..ed6a01a 100644
--- 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()