aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

去除画布打印信息

Browse Source
This commit is contained in:
李志鹏
2026-01-19 16:57:11 +08:00
parent 7ff2c2095a
commit 74b43e431b
19 changed files with 273 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/component/Canvas/CanvasEditor/utils/selectionToImage.js
View File

@@ -24,7 +24,7 @@ export const createRasterizedImage = async ({
isEnhanceImg, // 是否是增强图片
} = {}) => {
try {
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);
// console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);
// 确保有对象需要栅格化
if (fabricObjects.length === 0) {
@@ -86,14 +86,14 @@ const createClippedObjects = async ({
isEnhanceImg, // 是否是增强图片
}) => {
try {
console.log("🎯 使用新的图像遮罩裁剪方法创建对象");
// console.log("🎯 使用新的图像遮罩裁剪方法创建对象");
// 使用优化后的边界计算，确保包含描边区域
const optimizedBounds = calculateOptimizedBounds(
clippingObject,
fabricObjects
);
console.log("📐 优化后的选区边界框:", optimizedBounds);
// console.log("📐 优化后的选区边界框:", optimizedBounds);
// 获取羽化值
let featherAmount = 0;
@@ -102,7 +102,7 @@ const createClippedObjects = async ({
typeof selectionManager.getFeatherAmount === "function"
) {
featherAmount = selectionManager.getFeatherAmount();
console.log(`🌟 应用羽化效果: ${featherAmount}px`);
// console.log(`🌟 应用羽化效果: ${featherAmount}px`);
}
// 方法1：如果只需要返回DataURL，使用画布裁剪方法
@@ -160,7 +160,7 @@ const createClippedObjects = async ({
// 更新坐标
fabricImage.setCoords();
console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置");
// console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置");
return fabricImage;
} catch (error) {
console.warn("创建裁剪对象失败:", error);
@@ -181,7 +181,7 @@ const createClippedDataURLByCanvas = async ({
isEnhanceImg = false, // 是否是增强图片
}) => {
try {
console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
// console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
// 使用优化后的边界计算，确保包含描边区域
// const optimizedBounds = calculateOptimizedBounds(
@@ -199,18 +199,18 @@ const createClippedDataURLByCanvas = async ({
const pixelRatio = window.devicePixelRatio || 1;
const qualityMultiplier = !!isEnhanceImg ? Math.max(2, pixelRatio) : 1;
console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds);
// console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds);
const canvasWidth = Math.ceil(optimizedBounds.width * qualityMultiplier);
const canvasHeight = Math.ceil(optimizedBounds.height * qualityMultiplier);
console.log(
`📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})`
);
console.log("🎯 边界框对比:", {
original: selectionBounds,
optimized: optimizedBounds,
});
// console.log(
// `📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})`
// );
// console.log("🎯 边界框对比:", {
// original: selectionBounds,
// optimized: optimizedBounds,
// });
// 步骤1: 先将路径转换为遮罩图像（支持羽化）
const maskImageDataURL =
@@ -242,7 +242,7 @@ const createClippedDataURLByCanvas = async ({
canvasHeight,
});
console.log("✅ 图像遮罩裁剪完成，生成DataURL");
// console.log("✅ 图像遮罩裁剪完成，生成DataURL");
return clippedDataURL;
} catch (error) {
console.error("图像遮罩裁剪失败:", error);
@@ -262,7 +262,7 @@ const createSimpleClone = async ({
format,
}) => {
try {
console.log("📋 创建简单克隆对象");
// console.log("📋 创建简单克隆对象");
const clonedObjects = [];
@@ -370,7 +370,7 @@ const renderObjectsToDataURL = async (objects, quality, format) => {
*/
const renderClippedObjectsToDataURL = async (clippedObjects) => {
try {
console.log("🖼️ 渲染裁剪对象为DataURL");
// console.log("🖼️ 渲染裁剪对象为DataURL");
// 计算所有裁剪对象的总边界框
let totalBounds = null;
@@ -450,7 +450,7 @@ const renderClippedObjectsToDataURL = async (clippedObjects) => {
// 清理临时画布
tempCanvas.dispose();
console.log("✅ 裁剪对象渲染完成");
// console.log("✅ 裁剪对象渲染完成");
return dataURL;
} catch (error) {
console.error("渲染裁剪对象失败:", error);
@@ -472,7 +472,7 @@ const createLegacyRasterization = async ({
isCropByBg, // 是否根据背景裁剪
isEnhanceImg, // 是否是增强图片
}) => {
console.log("⚠️ 使用兼容的离屏渲染方法");
// console.log("⚠️ 使用兼容的离屏渲染方法");
// 这里保留原有的离屏渲染逻辑作为备选方案
const currentZoom = canvas.getZoom?.() || 1;
@@ -522,12 +522,12 @@ const calculateBounds = (fabricObjects) => {
// 获取绝对边界框（原始大小和位置）
const absoluteBound = obj.getBoundingRect(true, true);
console.log(`对象 ${obj.id || index} 边界框比较:`, {
relative: relativeBound,
absolute: absoluteBound,
scaleX: obj.scaleX,
scaleY: obj.scaleY,
});
// console.log(`对象 ${obj.id || index} 边界框比较:`, {
// relative: relativeBound,
// absolute: absoluteBound,
// scaleX: obj.scaleX,
// scaleY: obj.scaleY,
// });
// 计算绝对边界框的累积范围
if (!absoluteBounds) {
@@ -600,7 +600,7 @@ const createOffscreenRasterization = async ({
let renderBounds = absoluteBounds;
if (clippingObject) {
const clippingBounds = clippingObject.getBoundingRect(true, true);
console.log("🎯 使用裁剪对象边界框:", clippingBounds);
// console.log("🎯 使用裁剪对象边界框:", clippingBounds);
renderBounds = clippingBounds;
}
@@ -613,9 +613,9 @@ const createOffscreenRasterization = async ({
height: canvasHeight,
});
console.log(
`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`
);
// console.log(
// `🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`
// );
// 克隆对象到离屏画布
const clonedObjects = [];
@@ -786,7 +786,7 @@ const createMaskImageFromPath = async ({
qualityMultiplier,
}) => {
try {
console.log("🎭 创建路径遮罩图像");
// console.log("🎭 创建路径遮罩图像");
// 创建专门用于渲染遮罩的画布
const maskCanvas = new fabric.StaticCanvas();
@@ -820,7 +820,7 @@ const createMaskImageFromPath = async ({
// 清理遮罩画布
maskCanvas.dispose();
console.log("✅ 遮罩图像创建完成");
// console.log("✅ 遮罩图像创建完成");
return maskDataURL;
} catch (error) {
console.error("创建遮罩图像失败:", error);
@@ -841,7 +841,7 @@ const renderContentToImage = async ({
qualityMultiplier,
}) => {
try {
console.log("🖼️ 渲染内容图像");
// console.log("🖼️ 渲染内容图像");
// 创建内容渲染画布
const contentCanvas = new fabric.StaticCanvas();
@@ -880,7 +880,6 @@ const renderContentToImage = async ({
// if(obj.globalCompositeOperation === "multiply"){
// clonedObj.clipPath = null;
// }
console.log("==========", obj.id, obj.layerName);
contentCanvas.add(clonedObj);
}
@@ -897,7 +896,7 @@ const renderContentToImage = async ({
// 清理内容画布
contentCanvas.dispose();
console.log("✅ 内容图像渲染完成");
// console.log("✅ 内容图像渲染完成");
return contentDataURL;
} catch (error) {
console.error("渲染内容图像失败:", error);
@@ -920,7 +919,7 @@ const applyImageMask = async ({
canvasHeight,
}) => {
try {
console.log("🎯 应用图像遮罩");
// console.log("🎯 应用图像遮罩");
return new Promise((resolve, reject) => {
// 创建用于合成的Canvas元素
@@ -952,7 +951,7 @@ const applyImageMask = async ({
// 获取最终结果
const resultDataURL = compositeCanvas.toDataURL("image/png", 1.0);
console.log("✅ 图像遮罩应用完成");
// console.log("✅ 图像遮罩应用完成");
resolve(resultDataURL);
} catch (error) {
console.error("合成图像失败:", error);
@@ -994,7 +993,7 @@ const createAdvancedMaskImage = async ({
featherAmount = 0,
}) => {
try {
console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`);
// console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`);
// 创建专门用于渲染遮罩的画布
const maskCanvas = new fabric.StaticCanvas();
@@ -1047,7 +1046,7 @@ const createAdvancedMaskImage = async ({
// 清理遮罩画布
maskCanvas.dispose();
console.log("✅ 高级遮罩图像创建完成");
// console.log("✅ 高级遮罩图像创建完成");
return maskDataURL;
} catch (error) {
console.error("创建高级遮罩图像失败:", error);
@@ -1116,7 +1115,7 @@ const createSolidMaskPath = async (
qualityMultiplier
) => {
try {
console.log("🔧 创建实体遮罩路径，处理描边转填充");
// console.log("🔧 创建实体遮罩路径，处理描边转填充");
// 克隆原始对象
const maskPath = await cloneObjectAsync(clippingObject);
@@ -1125,9 +1124,9 @@ const createSolidMaskPath = async (
const hasStroke = maskPath.stroke && maskPath.strokeWidth > 0;
if (hasStroke) {
console.log(
`📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}`
);
// console.log(
// `📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}`
// );
// 对于有描边的路径，我们需要更精确的处理
const strokeWidth = maskPath.strokeWidth;
@@ -1182,7 +1181,7 @@ const createSolidMaskPath = async (
});
}
console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`);
// console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`);
} else {
// 没有描边，直接处理位置和缩放
maskPath.set({
@@ -1216,7 +1215,7 @@ const createSolidMaskPath = async (
*/
const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
try {
console.log("📐 计算优化后的边界框");
// console.log("📐 计算优化后的边界框");
// 获取裁剪对象的边界框（包含描边）
const clippingBounds = clippingObject.getBoundingRect(true, true);
@@ -1232,7 +1231,7 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
clippingBounds.width += strokeWidth;
clippingBounds.height += strokeWidth;
console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`);
// console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`);
}
// 计算内容对象的边界框
@@ -1246,11 +1245,11 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
height: Math.max(1, clippingBounds.height),
};
console.log("✅ 边界框优化完成", {
original: clippingObject.getBoundingRect(true, true),
optimized: optimizedBounds,
hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0),
});
// console.log("✅ 边界框优化完成", {
// original: clippingObject.getBoundingRect(true, true),
// optimized: optimizedBounds,
// hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0),
// });
return optimizedBounds;
} catch (error) {