tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(canvas): 图片裁剪 - 修复云端图片跨域导致的确认裁剪无反应

Browse Source 
裁剪属于像素级操作，需要先把图片画到 canvas 再导出。云端图片地址通常不带
CORS 头，canvas 会被标记为跨域，toDataURL 直接抛 SecurityError；而 loadImage
只挂了 onload、没有 onerror，加载失败时 Promise 永久挂起。两者叠加后，用户
侧的表现都是「点击确认裁剪没有任何反应」，控制台之外看不到原因。

- loadImage 补充 onerror，避免加载失败时 Promise 永不落地
- 仅对非 data:/blob: 的地址设置 crossOrigin=anonymous，本地资源设了反而
  可能取不到像素
- 新增 resolveCroppableImageSource()：优先用本地媒体缓存 Blob 构造同源
  objectURL，取不到再回退原始地址，并在 finally 中 revoke
- cropImageNode 补充 try/catch 与失败提示，让错误可见而不是静默失败

无外部行为变化，仅修复失败路径与错误反馈。
This commit is contained in:
cn-derekdu
2026-09-22 16:31:15 +08:00
parent bca47a27bc
commit d5741c98fe
2 changed files with 99 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/lib/canvas/canvas-image-data.ts
View File

@@ -159,9 +159,24 @@ function drawResizeCanvas(source: CanvasImageSource, sourceWidth: number, source
}
function loadImage(dataUrl: string) {
return new Promise<HTMLImageElement>((resolve) => {
return new Promise<HTMLImageElement>((resolve, reject) => {
const image = new Image();
// 只有跨源 HTTP(S) 地址才需要声明匿名跨域；同源的 /api 资源不能
// 强制走 CORS，否则缺少 ACAO 响应头时反而会加载失败。
if (isCrossOriginHttpUrl(dataUrl)) image.crossOrigin = "anonymous";
image.onload = () => resolve(image);
// 缺少 onerror 时加载失败会让 Promise 永久挂起，调用方 await 后表现为「点击无反应」。
image.onerror = () => reject(new Error("图片加载失败，无法处理该图片"));
image.src = dataUrl;
});
}
function isCrossOriginHttpUrl(value: string) {
if (typeof window === "undefined") return false;
try {
const url = new URL(value, window.location.href);
return (url.protocol === "http:" || url.protocol === "https:") && url.origin !== window.location.origin;
} catch {
return false;
}
}

42
web/src/pages/canvas/use-canvas-media-tools.ts
View File

@@ -49,7 +49,7 @@ import { navigateToSettings } from "@/lib/settings-navigation";
import { storeGeneratedVideo } from "@/services/api/video";
import { getTool } from "@/services/api/tools";
import { getMediaBlob, uploadMediaFile } from "@/services/file-storage";
import { uploadImage } from "@/services/image-storage";
import { getImageBlob, uploadImage } from "@/services/image-storage";
import { ensureCanvasNodeAsset } from "@/services/project-asset-sync";
import type { GenerationTask } from "@/services/api/task-center";
@@ -219,7 +219,13 @@ export function useCanvasMediaTools({
const cropImageNode = useCallback(async (node: CanvasNodeData, crop: CanvasImageCropRect) => {
if (!node.metadata?.content) return;
const cropped = await cropDataUrl(node.metadata.content, crop);
// 云端图片地址通常不带 CORS 头，直接画到 canvas 会被判定为跨域而无法导出。
// 优先用本地缓存里的 Blob 构造同源地址，裁剪才能读取像素。
let releaseSource = () => {};
try {
const source = await resolveCroppableImageSource(node);
releaseSource = source.release;
const cropped = await cropDataUrl(source.url, crop);
const image = await uploadImage(cropped);
const size = fitNodeSize(image.width, image.height, node.width, node.height);
const childId = nanoid();
@@ -230,7 +236,12 @@ export function useCanvasMediaTools({
setDialogNodeId(childId);
setCropNodeId(null);
await persistMediaNodes([child]);
}, [persistMediaNodes, setConnections, setDialogNodeId, setNodes, setSelectedNodeIds]);
} catch (error) {
message.error(error instanceof Error ? `裁剪失败：${error.message}` : "裁剪失败，请重试");
} finally {
releaseSource();
}
}, [message, persistMediaNodes, setConnections, setDialogNodeId, setNodes, setSelectedNodeIds]);
const saveAnnotatedImageNode = useCallback(async (node: CanvasNodeData, dataUrl: string) => {
const image = await uploadImage(dataUrl);
@@ -628,6 +639,7 @@ export function useCanvasMediaTools({
const splitImageNode = useCallback(async (node: CanvasNodeData, params: CanvasImageSplitParams) => {
if (!node.metadata?.content || !isValidGridSplit(params)) return;
try {
const pieces = await splitDataUrl(node.metadata.content, params);
const sizedPieces = await Promise.all(pieces.map(async (piece) => {
const image = await uploadImage(piece.dataUrl);
@@ -653,6 +665,9 @@ export function useCanvasMediaTools({
setDialogNodeId(null);
await persistMediaNodes(childNodes);
message.success(`已切分为 ${childNodes.length} 个子节点`);
} catch (error) {
message.error(error instanceof Error ? `切分失败：${error.message}` : "图片切分失败，请重试");
}
}, [message, persistMediaNodes, setConnections, setDialogNodeId, setNodes, setSelectedConnectionId, setSelectedNodeIds]);
const maskEditImageNode = useCallback(async (node: CanvasNodeData, payload: CanvasImageMaskEditPayload) => {
@@ -1046,6 +1061,7 @@ export function useCanvasMediaTools({
const upscaleImageNode = useCallback(async (node: CanvasNodeData, params: CanvasImageUpscaleParams) => {
if (!node.metadata?.content) return;
setUpscaleNodeId(null);
try {
const upscaled = await upscaleDataUrl(node.metadata.content, params);
const image = await uploadImage(upscaled);
const size = fitNodeSize(image.width, image.height);
@@ -1056,7 +1072,10 @@ export function useCanvasMediaTools({
setSelectedNodeIds(new Set([childId]));
setDialogNodeId(childId);
await persistMediaNodes([child]);
}, [persistMediaNodes, setConnections, setDialogNodeId, setNodes, setSelectedNodeIds]);
} catch (error) {
message.error(error instanceof Error ? `放大失败：${error.message}` : "图片放大失败，请重试");
}
}, [message, persistMediaNodes, setConnections, setDialogNodeId, setNodes, setSelectedNodeIds]);
const generateAngleNode = useCallback(async (node: CanvasNodeData, params: CanvasImageAngleParams) => {
if (!node.metadata?.content) return;
@@ -1280,3 +1299,18 @@ export function useCanvasMediaTools({
upscaleNodeId,
};
}
// 裁剪、切分等像素级操作要求图片同源可读：云端地址若不带 CORS 头，
// canvas 会被标记为跨域，toDataURL 直接抛 SecurityError。
// 这里优先用本地缓存 Blob 构造同源 objectURL，取不到时再回退原始地址。
async function resolveCroppableImageSource(node: CanvasNodeData): Promise<{ url: string; release: () => void }> {
const content = node.metadata?.content ?? "";
if (content.startsWith("data:") || content.startsWith("blob:")) return { url: content, release: () => {} };
const storageKey = node.metadata?.storageKey;
if (!storageKey) return { url: content, release: () => {} };
const readBlob = storageKey.startsWith("image:") || storageKey.startsWith("generation-image:") ? getImageBlob : getMediaBlob;
const blob = await readBlob(storageKey).catch(() => null);
if (!blob) return { url: content, release: () => {} };
const url = URL.createObjectURL(blob);
return { url, release: () => URL.revokeObjectURL(url) };
}