提交

src/components/mediaComponents.vue

@@ -63,10 +63,58 @@ import { defineProps, ref } from 'vue'
 const emit = defineEmits(['change', 'getCalc'])
 const props = defineProps<{ src: string }>()
 const loading = ref(false)
-const fileType = ref('')
 const src = ref(props.src)
+const fileType = ref('')
+
+const isImg = (url: string) => {
+  return /\.(jpg|jpeg|png|gif)$/.test(url)
+}
+
+// 判定如果是图片则直接输出图片，如果是视频则输出第一帧图片
+const getImage = (file: File | string) => {
+  const video = document.createElement('video')
+  fileType.value = 'video'
+  if (typeof file === 'string') {
+    video.setAttribute('crossorigin', 'anonymous')
+    video.src = file
+  } else {
+    if (file.type.indexOf('image') !== -1) {
+      src.value = URL.createObjectURL(file)
+      fileType.value = 'image'
+      const img = new Image()
+      img.onload = function () {
+        emit('getCalc', img.width, img.height)
+      }
+      img.src = URL.createObjectURL(file)
+      return
+    }
+    // 视频 获取第一帧
+    // 播放本地视频文件
+    video.src = URL.createObjectURL(file)
+  }
+  video.onloadeddata = function () {
+    // 跳转到第二秒
+    video.currentTime = 1
+    // 当视频到达第二秒时，绘制帧
+    video.addEventListener('seeked', () => {
+      // 获取第一帧
+      emit('getCalc', video.videoWidth, video.videoHeight)
+      const canvas = document.createElement('canvas')
+      canvas.width = video.videoWidth
+      canvas.height = video.videoHeight
+      const ctx = canvas.getContext('2d')
+      ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
+      src.value = canvas.toDataURL()
+    })
+  }
+}
+if (src.value) {
+  const isImgUrl = isImg(src.value)
+  fileType.value = isImgUrl ? 'image' : 'video'
+  getImage(src.value)
+}
 
-let oriUrl = ''
+let oriUrl = props.src ? props.src : ''
 let times = 0
 
 const close = () => {
@@ -123,40 +171,6 @@ const chagne = (e: Event) => {
     })
 }
 
-// 判定如果是图片则直接输出图片，如果是视频则输出第一帧图片
-const getImage = (file: File) => {
-  if (file.type.indexOf('image') !== -1) {
-    src.value = URL.createObjectURL(file)
-    fileType.value = 'image'
-    const img = new Image()
-    img.onload = function () {
-      emit('getCalc', img.width, img.height)
-    }
-    img.src = URL.createObjectURL(file)
-    return
-  }
-  fileType.value = 'video'
-  // 视频 获取第一帧
-  const video = document.createElement('video')
-  // 播放本地视频文件
-  video.src = URL.createObjectURL(file)
-  video.onloadeddata = function () {
-    // 跳转到第二秒
-    video.currentTime = 2
-    // 当视频到达第二秒时，绘制帧
-    video.addEventListener('seeked', () => {
-      // 获取第一帧
-      emit('getCalc', video.videoWidth, video.videoHeight)
-      const canvas = document.createElement('canvas')
-      canvas.width = video.videoWidth
-      canvas.height = video.videoHeight
-      const ctx = canvas.getContext('2d')
-      ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
-      src.value = canvas.toDataURL()
-    })
-  }
-}
-
 const playVideo = () => {
   window.open(oriUrl)
 }

src/tool/adList.js

@@ -284,7 +284,7 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch(`${base}ad/click?uuid=${uuid}&stuffId=${src.stuffId}&slotId=${slotId}`)
           .then((res) => res.text())
           .then(() => {
-            window.open(src.ad_url)
+            window.open(src.landingPage)
           })
       })
       // 图片加载完成