播放器主题色根据专辑封面图片提取

src/views/api/aplayer/components/aplayer-thumbnail.vue

@@ -1,10 +1,11 @@
 <template>
   <div
     class="aplayer-pic"
-    :style="currentPicStyleObj"
+    :style="{backgroundColor: theme}"
     @mousedown="onDragBegin"
     @click="onClick"
   >
+    <img v-if="pic" ref="thumbnailPic" :src="pic" @load="imgLoad" />
     <div class="aplayer-button" :class="playing ? 'aplayer-pause' : 'aplayer-play'">
       <icon-button
         :icon="playing ? 'pause' : 'play'"
@@ -14,12 +15,13 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { ref, watch } from 'vue'
 import IconButton from './aplayer-iconbutton.vue'
+import { themeColor } from '../utils'
 
 const props = withDefaults(defineProps<{
   pic?: string
-  theme?: string
+  theme: string
   playing: boolean
   enableDrag: boolean
 }>(), {
@@ -27,19 +29,12 @@ const props = withDefaults(defineProps<{
   enableDrag: false
 })
 
-const emit = defineEmits(['dragbegin', 'dragging', 'dragend', 'toggleplay'])
+const emit = defineEmits(['dragbegin', 'dragging', 'dragend', 'toggleplay', 'adaptingTheme'])
 
 const hasMovedSinceMouseDown = ref(false)
 const dragStartX = ref(0)
 const dragStartY = ref(0)
-
-const currentPicStyleObj = computed(() => {
-  if (!props.pic) return {}
-  return {
-    backgroundImage: `url(${props.pic})`,
-    backgroundColor: props.theme
-  }
-})
+const thumbnailPic = ref<unknown>(null)
 
 const onDragBegin = (e: MouseEvent) => {
   if (props.enableDrag) {
@@ -65,6 +60,12 @@ const onClick = () => {
     emit('toggleplay')
   }
 }
+const imgLoad = () => {
+  emit('adaptingTheme', themeColor(<HTMLImageElement>thumbnailPic.value))
+}
+watch(() => props.pic, (pic?: string) => {
+  if (!pic) emit('adaptingTheme', props.theme)
+}, { immediate: true })
 </script>
 
 <style lang="less" scoped>
@@ -79,8 +80,6 @@ const onClick = () => {
   position: relative;
   height: @aplayer-height;
   width: @aplayer-height;
-  background-image: url(../default.jpg);
-  background-size: cover;
   transition: all 0.3s ease;
   cursor: pointer;
   &:hover {
@@ -129,5 +128,9 @@ const onClick = () => {
       width: 12px;
     }
   }
+  img {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>