lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复图片编辑器上传原图而非预览图

Browse Source 
- 添加imageUrlToBase64函数，从原图URL获取完整原图数据
- 修复抠图、变清晰、图像拓展功能，使用原图URL而不是canvas预览图
- 确保上传给API的是原图，下载的也是原图
- 添加详细调试日志，记录原图Base64长度
This commit is contained in:
Your Name 2025-12-30 18:25:15 +08:00
parent 9d40b78ea5
commit da1579d852
1 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/image-annotator.tsx
View File

@ -430,18 +430,41 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
setActions([]);
};
// 将图片URL转换为Base64（获取原图数据）
const imageUrlToBase64 = async (url: string): Promise<string> => {
// 如果已经是data URL，直接返回
if (url.startsWith("data:")) {
return url.split(",")[1];
}
// 如果是HTTP URL，需要先fetch获取
const response = await fetch(url);
if (!response.ok) {
throw new Error(`获取原图失败: ${response.status} ${response.statusText}`);
}
const blob = await response.blob();
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
const base64String = (reader.result as string).split(",")[1];
resolve(base64String);
};
reader.onerror = reject;
reader.readAsDataURL(blob);
});
};
// 抠图功能
const handleRemoveBackground = async () => {
if (!image || !canvasRef.current) return;
if (!image) return;
setIsRemovingBg(true);
try {
// 获取当前画布的图片（包含标注）
const canvas = canvasRef.current;
const currentImageData = canvas.toDataURL("image/png");
// 提取Base64数据（去掉data:image/png;base64,前缀）
const base64Data = currentImageData.split(",")[1];
// 使用原图URL获取原图数据，而不是canvas的预览图
console.log("[抠图] 使用原图URL获取数据:", originalImageUrl);
const base64Data = await imageUrlToBase64(originalImageUrl);
console.log("[抠图] 原图Base64长度:", base64Data.length, "字符");
// 调用抠图API
const response = await fetch("/api/rmbg", {
@ -497,16 +520,14 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
// 变清晰处理
const handleEnhance = async () => {
if (!image || !canvasRef.current) return;
if (!image) return;
setIsEnhancing(true);
try {
// 获取当前画布的图片（包含标注）
const canvas = canvasRef.current;
const currentImageData = canvas.toDataURL("image/png");
// 提取Base64数据（去掉data:image/png;base64,前缀）
const base64Data = currentImageData.split(",")[1];
// 使用原图URL获取原图数据，而不是canvas的预览图
console.log("[变清晰] 使用原图URL获取数据:", originalImageUrl);
const base64Data = await imageUrlToBase64(originalImageUrl);
console.log("[变清晰] 原图Base64长度:", base64Data.length, "字符");
// 调用变清晰API
const response = await fetch("/api/enhance", {
@ -806,16 +827,14 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
// 图像拓展处理
const handleExtend = async () => {
if (!image || !canvasRef.current) return;
if (!image) return;
setIsExtending(true);
try {
// 获取当前画布的图片（包含标注）
const canvas = canvasRef.current;
const currentImageData = canvas.toDataURL("image/png");
// 提取Base64数据（去掉data:image/png;base64,前缀）
const base64Data = currentImageData.split(",")[1];
// 使用原图URL获取原图数据，而不是canvas的预览图
console.log("[图像拓展] 使用原图URL获取数据:", originalImageUrl);
const base64Data = await imageUrlToBase64(originalImageUrl);
console.log("[图像拓展] 原图Base64长度:", base64Data.length, "字符");
// 调用图像拓展API
const response = await fetch("/api/extend", {