清理前端抠绿与 qwenSprite 死代码
- 删除无调用方的前端像素抠绿链(chromaKey.ts 及 characterAssetWorkflowModel 中的视频采帧/抠绿函数) - 删除已被 server-rs 提示词实现取代的 qwenSprite 共享骨架 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
import { removeBackgroundFromRgba } from '../../../packages/shared/src/assets/chromaKey';
|
||||
import {
|
||||
AnimationState,
|
||||
type Character,
|
||||
@@ -453,19 +452,6 @@ export function loadImageFromSource(source: string) {
|
||||
});
|
||||
}
|
||||
|
||||
function loadVideoFromSource(source: string) {
|
||||
return new Promise<HTMLVideoElement>((resolve, reject) => {
|
||||
const video = document.createElement('video');
|
||||
video.crossOrigin = 'anonymous';
|
||||
video.preload = 'auto';
|
||||
video.muted = true;
|
||||
video.playsInline = true;
|
||||
video.onloadeddata = () => resolve(video);
|
||||
video.onerror = () => reject(new Error(`加载视频失败:${source}`));
|
||||
video.src = source;
|
||||
});
|
||||
}
|
||||
|
||||
function createCanvas(width: number, height: number) {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
@@ -708,200 +694,6 @@ export async function buildAnimationClipFromMaster(
|
||||
} satisfies DraftAnimationClip;
|
||||
}
|
||||
|
||||
function applyGreenScreenAlpha(
|
||||
context: CanvasRenderingContext2D,
|
||||
width: number,
|
||||
height: number,
|
||||
) {
|
||||
const imageData = context.getImageData(0, 0, width, height);
|
||||
removeBackgroundFromRgba(imageData.data, width, height);
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
}
|
||||
|
||||
async function normalizeFrameSourceToDataUrl(
|
||||
frameSource: string,
|
||||
options: {
|
||||
frameWidth: number;
|
||||
frameHeight: number;
|
||||
applyChromaKey: boolean;
|
||||
},
|
||||
) {
|
||||
const image = await loadImageFromSource(frameSource);
|
||||
const { canvas, context } = createCanvas(
|
||||
options.frameWidth,
|
||||
options.frameHeight,
|
||||
);
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawContainedImage(context, image, {
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
});
|
||||
|
||||
if (options.applyChromaKey) {
|
||||
applyGreenScreenAlpha(context, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
return canvas.toDataURL('image/png');
|
||||
}
|
||||
|
||||
export async function normalizeMasterVisualSourceToDataUrl(
|
||||
source: string,
|
||||
options: {
|
||||
applyChromaKey?: boolean;
|
||||
} = {},
|
||||
) {
|
||||
const image = await loadImageFromSource(source);
|
||||
const { canvas, context } = createCanvas(
|
||||
MASTER_VISUAL_WIDTH,
|
||||
MASTER_VISUAL_HEIGHT,
|
||||
);
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawContainedImage(context, image, {
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
});
|
||||
|
||||
if (options.applyChromaKey !== false) {
|
||||
applyGreenScreenAlpha(context, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
return {
|
||||
dataUrl: canvas.toDataURL('image/png'),
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
};
|
||||
}
|
||||
|
||||
function seekVideo(video: HTMLVideoElement, targetTime: number) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (Math.abs(video.currentTime - targetTime) < 0.001) {
|
||||
window.requestAnimationFrame(() => resolve());
|
||||
return;
|
||||
}
|
||||
|
||||
const handleSeeked = () => {
|
||||
cleanup();
|
||||
resolve();
|
||||
};
|
||||
const handleError = () => {
|
||||
cleanup();
|
||||
reject(new Error('视频定位失败'));
|
||||
};
|
||||
const cleanup = () => {
|
||||
video.removeEventListener('seeked', handleSeeked);
|
||||
video.removeEventListener('error', handleError);
|
||||
};
|
||||
|
||||
video.addEventListener('seeked', handleSeeked, { once: true });
|
||||
video.addEventListener('error', handleError, { once: true });
|
||||
video.currentTime = Math.max(0, targetTime);
|
||||
});
|
||||
}
|
||||
|
||||
export async function buildAnimationClipFromImageSources(
|
||||
sources: string[],
|
||||
options: {
|
||||
animation: AnimationState;
|
||||
fps: number;
|
||||
loop: boolean;
|
||||
frameWidth?: number;
|
||||
frameHeight?: number;
|
||||
applyChromaKey?: boolean;
|
||||
},
|
||||
) {
|
||||
const frameWidth = options.frameWidth ?? GENERATED_FRAME_WIDTH;
|
||||
const frameHeight = options.frameHeight ?? GENERATED_FRAME_HEIGHT;
|
||||
const frames = await Promise.all(
|
||||
sources.map((source) =>
|
||||
normalizeFrameSourceToDataUrl(source, {
|
||||
frameWidth,
|
||||
frameHeight,
|
||||
applyChromaKey: options.applyChromaKey ?? false,
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
return {
|
||||
animation: options.animation,
|
||||
frames,
|
||||
fps: Math.max(1, options.fps),
|
||||
loop: options.loop,
|
||||
frameWidth,
|
||||
frameHeight,
|
||||
} satisfies DraftAnimationClip;
|
||||
}
|
||||
|
||||
export async function buildAnimationClipFromVideoSource(
|
||||
videoSource: string,
|
||||
options: {
|
||||
animation: AnimationState;
|
||||
fps: number;
|
||||
loop: boolean;
|
||||
frameCount?: number;
|
||||
frameWidth?: number;
|
||||
frameHeight?: number;
|
||||
applyChromaKey?: boolean;
|
||||
sampleStartRatio?: number;
|
||||
sampleEndRatio?: number;
|
||||
},
|
||||
) {
|
||||
const video = await loadVideoFromSource(videoSource);
|
||||
const frameWidth = options.frameWidth ?? GENERATED_FRAME_WIDTH;
|
||||
const frameHeight = options.frameHeight ?? GENERATED_FRAME_HEIGHT;
|
||||
const duration =
|
||||
Number.isFinite(video.duration) && video.duration > 0 ? video.duration : 1;
|
||||
const derivedFrameCount = Math.max(
|
||||
2,
|
||||
options.frameCount ?? Math.round(duration * Math.max(1, options.fps)),
|
||||
);
|
||||
const sampleStartRatio = Math.min(
|
||||
0.85,
|
||||
Math.max(0, options.sampleStartRatio ?? 0),
|
||||
);
|
||||
const sampleEndRatio = Math.min(
|
||||
1,
|
||||
Math.max(sampleStartRatio + 0.05, options.sampleEndRatio ?? 1),
|
||||
);
|
||||
const sampleWindowDuration = duration * (sampleEndRatio - sampleStartRatio);
|
||||
const { canvas, context } = createCanvas(frameWidth, frameHeight);
|
||||
const frames: string[] = [];
|
||||
|
||||
for (let frameIndex = 0; frameIndex < derivedFrameCount; frameIndex += 1) {
|
||||
const progress = options.loop
|
||||
? frameIndex / derivedFrameCount
|
||||
: frameIndex / Math.max(1, derivedFrameCount - 1);
|
||||
const targetTime = Math.min(
|
||||
duration - 0.001,
|
||||
duration * sampleStartRatio + sampleWindowDuration * progress,
|
||||
);
|
||||
|
||||
await seekVideo(video, targetTime);
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawContainedSource(context, video, video.videoWidth, video.videoHeight, {
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
});
|
||||
|
||||
if (options.applyChromaKey) {
|
||||
applyGreenScreenAlpha(context, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
frames.push(canvas.toDataURL('image/png'));
|
||||
}
|
||||
|
||||
return {
|
||||
animation: options.animation,
|
||||
frames,
|
||||
fps: Math.max(1, options.fps),
|
||||
loop: options.loop,
|
||||
frameWidth,
|
||||
frameHeight,
|
||||
previewVideoPath: videoSource,
|
||||
} satisfies DraftAnimationClip;
|
||||
}
|
||||
|
||||
async function buildReferenceVideoFromFrameSources(
|
||||
frameSources: string[],
|
||||
options: {
|
||||
|
||||
Reference in New Issue
Block a user