refactor: Update thumbnail scale in Artplayer

packages/artplayer/src/events/index.js

@@ -1,4 +1,3 @@
-import { ArtPlayerError } from '../utils/error';
 import clickInit from './clickInit';
 import hoverInit from './hoverInit';
 import moveInit from './moveInit';
@@ -13,7 +12,6 @@ export default class Events {
         this.destroyEvents = [];
         this.proxy = this.proxy.bind(this);
         this.hover = this.hover.bind(this);
-        this.loadImg = this.loadImg.bind(this);
 
         clickInit(art, this);
         hoverInit(art, this);
@@ -45,28 +43,6 @@ export default class Events {
         }
     }
 
-    loadImg(img) {
-        return new Promise((resolve, reject) => {
-            let image;
-
-            if (img instanceof HTMLImageElement) {
-                image = img;
-            } else if (typeof img === 'string') {
-                image = new Image();
-                image.src = img;
-            } else {
-                return reject(new ArtPlayerError('Unable to get Image'));
-            }
-
-            if (image.complete) {
-                return resolve(image);
-            }
-
-            this.proxy(image, 'load', () => resolve(image));
-            this.proxy(image, 'error', () => reject(new ArtPlayerError(`Failed to load Image: ${image.src}`)));
-        });
-    }
-
     remove(destroyEvent) {
         const index = this.destroyEvents.indexOf(destroyEvent);
         if (index > -1) {

packages/artplayer/src/index.js

@@ -170,6 +170,7 @@ export default class Artplayer extends Emitter {
                 column: 10,
                 width: 0,
                 height: 0,
+                scale: 1,
             },
             subtitle: {
                 url: '',

packages/artplayer/src/player/thumbnailsMix.js

@@ -1,9 +1,8 @@
-import { def, setStyle, isMobile } from '../utils';
+import { def, setStyle, isMobile, loadImg } from '../utils';
 
 export default function thumbnailsMix(art) {
     const {
         option,
-        events: { loadImg },
         template: { $progress, $video },
     } = art;
 
@@ -24,14 +23,14 @@ export default function thumbnailsMix(art) {
         const $thumbnails = art.controls?.thumbnails;
         if (!$thumbnails) return;
 
-        const { url, number, column, width, height } = option.thumbnails;
-        const width2 = width || image.naturalWidth / column;
-        const height2 = height || width2 / ($video.videoWidth / $video.videoHeight);
+        const { number, column, width, height, scale } = option.thumbnails;
+        const width2 = width * scale || image.naturalWidth / column;
+        const height2 = height * scale || width2 / ($video.videoWidth / $video.videoHeight);
         const perWidth = $progress.clientWidth / number;
         const perIndex = Math.floor(posWidth / perWidth);
         const yIndex = Math.ceil(perIndex / column) - 1;
         const xIndex = perIndex % column || column - 1;
-        setStyle($thumbnails, 'backgroundImage', `url(${url})`);
+        setStyle($thumbnails, 'backgroundImage', `url(${image.src})`);
         setStyle($thumbnails, 'height', `${height2}px`);
         setStyle($thumbnails, 'width', `${width2}px`);
         setStyle($thumbnails, 'backgroundPosition', `-${xIndex * width2}px -${yIndex * height2}px`);
@@ -46,7 +45,7 @@ export default function thumbnailsMix(art) {
 
     art.on('setBar', async (type, percentage, event) => {
         const $thumbnails = art.controls?.thumbnails;
-        const { url } = option.thumbnails;
+        const { url, scale } = option.thumbnails;
         if (!$thumbnails || !url) return;
 
         const isMobileDroging = type === 'played' && event && isMobile;
@@ -54,7 +53,7 @@ export default function thumbnailsMix(art) {
         if (type === 'hover' || isMobileDroging) {
             if (!loading) {
                 loading = true;
-                image = await loadImg(url);
+                image = await loadImg(url, scale);
                 isLoad = true;
             }
 

packages/artplayer/src/scheme/index.js

@@ -104,6 +104,7 @@ export default {
         column: n,
         width: n,
         height: n,
+        scale: n,
     },
     subtitle: {
         url: s,

packages/artplayer/src/utils/dom.js

@@ -117,3 +117,44 @@ export function supportsFlex() {
 export function getRect(el) {
     return el.getBoundingClientRect();
 }
+
+export function loadImg(imageUrl, scale) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+
+        img.onload = function () {
+            if (!scale || scale === 1) {
+                resolve(img);
+            } else {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                canvas.width = img.width * scale;
+                canvas.height = img.height * scale;
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+                canvas.toBlob((blob) => {
+                    const blobUrl = URL.createObjectURL(blob);
+                    const scaledImg = new Image();
+
+                    scaledImg.onload = function () {
+                        resolve(scaledImg);
+                    };
+
+                    scaledImg.onerror = function () {
+                        URL.revokeObjectURL(blobUrl);
+                        reject(new Error(`Image load failed: ${imageUrl}`));
+                    };
+
+                    scaledImg.src = blobUrl;
+                });
+            }
+        };
+
+        img.onerror = function () {
+            reject(new Error(`Image load failed: ${imageUrl}`));
+        };
+
+        img.src = imageUrl;
+    });
+}