kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-16 15:08:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

비디오의 경우 원하는 장면으로 썸네일을 변경할 수 있도록 개선

Browse Source
This commit is contained in:
static
2025-07-12 02:53:30 +09:00
parent eac81abe5a
commit fa7ba451c3
3 changed files with 74 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/lib/modules/thumbnail.ts
View File

@@ -42,6 +42,30 @@ const generateImageThumbnail = (imageUrl: string) => {
});
};
export const captureVideoThumbnail = (video: HTMLVideoElement) => {
return new Promise<Blob>((resolve, reject) => {
const canvas = document.createElement("canvas");
const { width, height } = scaleSize(video.videoWidth, video.videoHeight, 250);
canvas.width = width;
canvas.height = height;
const context = canvas.getContext("2d");
if (!context) {
return reject(new Error("Failed to generate thumbnail"));
}
context.drawImage(video, 0, 0, width, height);
canvas.toBlob((blob) => {
if (blob) {
resolve(blob);
} else {
reject(new Error("Failed to generate thumbnail"));
}
}, "image/webp");
});
};
const generateVideoThumbnail = (videoUrl: string, time = 0) => {
return new Promise<Blob>((resolve, reject) => {
const video = document.createElement("video");
@@ -49,25 +73,7 @@ const generateVideoThumbnail = (videoUrl: string, time = 0) => {
video.currentTime = time;
};
video.onseeked = () => {
const canvas = document.createElement("canvas");
const { width, height } = scaleSize(video.videoWidth, video.videoHeight, 250);
canvas.width = width;
canvas.height = height;
const context = canvas.getContext("2d");
if (!context) {
return reject(new Error("Failed to generate thumbnail"));
}
context.drawImage(video, 0, 0, width, height);
canvas.toBlob((blob) => {
if (blob) {
resolve(blob);
} else {
reject(new Error("Failed to generate thumbnail"));
}
}, "image/webp");
captureVideoThumbnail(video).then(resolve).catch(reject);
};
video.onerror = reject;