fix: 修复多个已知问题
This commit is contained in:
bighuixiang
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
import { LiquifyWebGLManager } from "./LiquifyWebGLManager";
|
||||
import { LiquifyCPUManager } from "./LiquifyCPUManager";
|
||||
import { LayerType } from "../../utils/layerHelper";
|
||||
import { findInChildLayers, LayerType } from "../../utils/layerHelper";
|
||||
|
||||
export class EnhancedLiquifyManager {
|
||||
/**
|
||||
@@ -160,7 +160,10 @@ export class EnhancedLiquifyManager {
|
||||
} else if (typeof target === "object") {
|
||||
// 传入的是对象
|
||||
targetObject = target;
|
||||
const layer = this.layerManager.findLayerByObject(targetObject);
|
||||
const { layer } = findInChildLayers(
|
||||
this.layerManager.layers.value,
|
||||
targetObject.layerId
|
||||
);
|
||||
if (layer) {
|
||||
targetLayerId = layer.id;
|
||||
} else {
|
||||
@@ -632,16 +635,69 @@ export class EnhancedLiquifyManager {
|
||||
async _getImageData(fabricObject) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 创建临时canvas - 关键修复：使用原始图像尺寸，不考虑fabric对象的缩放
|
||||
console.log("开始获取图像数据，对象类型:", fabricObject.type);
|
||||
console.log("对象属性:", {
|
||||
width: fabricObject.width,
|
||||
height: fabricObject.height,
|
||||
hasElement: !!fabricObject._element,
|
||||
hasSrc: !!fabricObject.getSrc,
|
||||
});
|
||||
|
||||
// 检查基本属性
|
||||
if (!fabricObject.width || !fabricObject.height) {
|
||||
reject(new Error("图像对象缺少有效的宽度或高度"));
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建临时canvas - 使用原始图像尺寸，不考虑fabric对象的缩放
|
||||
const tempCanvas = document.createElement("canvas");
|
||||
// 使用图像的原始尺寸，而不是缩放后的尺寸
|
||||
tempCanvas.width = fabricObject.width;
|
||||
tempCanvas.height = fabricObject.height;
|
||||
const tempCtx = tempCanvas.getContext("2d");
|
||||
|
||||
// 如果对象有图像元素
|
||||
console.log(
|
||||
`创建临时Canvas，尺寸: ${tempCanvas.width}x${tempCanvas.height}`
|
||||
);
|
||||
|
||||
// 处理不同的图像源
|
||||
if (fabricObject._element) {
|
||||
// 绘制原始尺寸的图像
|
||||
console.log("使用 _element 绘制图像");
|
||||
|
||||
// 检查_element是否有效
|
||||
if (
|
||||
!fabricObject._element.complete &&
|
||||
fabricObject._element.tagName === "IMG"
|
||||
) {
|
||||
console.log("图像未加载完成，等待加载...");
|
||||
fabricObject._element.onload = () => {
|
||||
try {
|
||||
tempCtx.drawImage(
|
||||
fabricObject._element,
|
||||
0,
|
||||
0,
|
||||
fabricObject.width,
|
||||
fabricObject.height
|
||||
);
|
||||
const imageData = tempCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
tempCanvas.width,
|
||||
tempCanvas.height
|
||||
);
|
||||
console.log("✅ 图像加载完成后获取数据成功");
|
||||
resolve(imageData);
|
||||
} catch (error) {
|
||||
console.error("图像加载后绘制失败:", error);
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
fabricObject._element.onerror = () => {
|
||||
reject(new Error("图像加载失败"));
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接绘制已加载的图像
|
||||
tempCtx.drawImage(
|
||||
fabricObject._element,
|
||||
0,
|
||||
@@ -649,49 +705,124 @@ export class EnhancedLiquifyManager {
|
||||
fabricObject.width,
|
||||
fabricObject.height
|
||||
);
|
||||
} else if (fabricObject.getSrc) {
|
||||
} else if (
|
||||
fabricObject.getSrc &&
|
||||
typeof fabricObject.getSrc === "function"
|
||||
) {
|
||||
console.log("使用 getSrc() 方法获取图像源");
|
||||
|
||||
// 通过URL创建图像
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous"; // 避免跨域问题
|
||||
|
||||
img.onload = () => {
|
||||
tempCtx.drawImage(
|
||||
img,
|
||||
0,
|
||||
0,
|
||||
fabricObject.width,
|
||||
fabricObject.height
|
||||
);
|
||||
const imageData = tempCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
tempCanvas.width,
|
||||
tempCanvas.height
|
||||
);
|
||||
resolve(imageData);
|
||||
try {
|
||||
console.log(
|
||||
`图像加载成功，原始尺寸: ${img.naturalWidth}x${img.naturalHeight}`
|
||||
);
|
||||
|
||||
tempCtx.drawImage(
|
||||
img,
|
||||
0,
|
||||
0,
|
||||
fabricObject.width,
|
||||
fabricObject.height
|
||||
);
|
||||
|
||||
const imageData = tempCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
tempCanvas.width,
|
||||
tempCanvas.height
|
||||
);
|
||||
|
||||
console.log("✅ 通过URL获取图像数据成功");
|
||||
resolve(imageData);
|
||||
} catch (error) {
|
||||
console.error("绘制图像失败:", error);
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
img.onerror = reject;
|
||||
img.src = fabricObject.getSrc();
|
||||
|
||||
img.onerror = (error) => {
|
||||
console.error("图像加载失败:", error);
|
||||
reject(new Error("无法加载图像URL: " + fabricObject.getSrc()));
|
||||
};
|
||||
|
||||
const srcUrl = fabricObject.getSrc();
|
||||
console.log("加载图像URL:", srcUrl);
|
||||
img.src = srcUrl;
|
||||
return;
|
||||
} else if (fabricObject.src) {
|
||||
console.log("使用 src 属性获取图像源");
|
||||
|
||||
// 通过src属性创建图像
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
|
||||
img.onload = () => {
|
||||
try {
|
||||
tempCtx.drawImage(
|
||||
img,
|
||||
0,
|
||||
0,
|
||||
fabricObject.width,
|
||||
fabricObject.height
|
||||
);
|
||||
|
||||
const imageData = tempCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
tempCanvas.width,
|
||||
tempCanvas.height
|
||||
);
|
||||
|
||||
console.log("✅ 通过src属性获取图像数据成功");
|
||||
resolve(imageData);
|
||||
} catch (error) {
|
||||
console.error("通过src绘制图像失败:", error);
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
|
||||
img.onerror = (error) => {
|
||||
console.error("通过src加载图像失败:", error);
|
||||
reject(new Error("无法加载图像src: " + fabricObject.src));
|
||||
};
|
||||
|
||||
console.log("加载图像src:", fabricObject.src);
|
||||
img.src = fabricObject.src;
|
||||
return;
|
||||
} else {
|
||||
reject(new Error("无法获取图像数据"));
|
||||
console.error("无法找到有效的图像源");
|
||||
reject(
|
||||
new Error("图像对象缺少有效的图像源（_element, getSrc, 或 src）")
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取图像数据
|
||||
const imageData = tempCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
tempCanvas.width,
|
||||
tempCanvas.height
|
||||
);
|
||||
// 如果走到这里，说明使用了_element直接绘制
|
||||
try {
|
||||
const imageData = tempCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
tempCanvas.width,
|
||||
tempCanvas.height
|
||||
);
|
||||
|
||||
console.log(
|
||||
`获取图像数据: 对象尺寸=${fabricObject.width}x${fabricObject.height}, ` +
|
||||
`对象缩放=(${fabricObject.scaleX}, ${fabricObject.scaleY}), ` +
|
||||
`图像数据尺寸=${imageData.width}x${imageData.height}`
|
||||
);
|
||||
console.log(
|
||||
`✅ 获取图像数据成功: 对象尺寸=${fabricObject.width}x${fabricObject.height}, ` +
|
||||
`对象缩放=(${fabricObject.scaleX}, ${fabricObject.scaleY}), ` +
|
||||
`图像数据尺寸=${imageData.width}x${imageData.height}`
|
||||
);
|
||||
|
||||
resolve(imageData);
|
||||
resolve(imageData);
|
||||
} catch (error) {
|
||||
console.error("获取ImageData失败:", error);
|
||||
reject(new Error("无法从Canvas获取图像数据: " + error.message));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("_getImageData 执行失败:", error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user