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

30
src/component/Canvas/CanvasEditor/utils/rasterizedImage.js
View File

@@ -22,7 +22,7 @@ export const createRasterizedImage = async ({
isGroupWithMask = false, // 是否为带遮罩的组图层
} = {}) => {
try {
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`);
// console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`);
// 确保有对象需要栅格化
if (fabricObjects.length === 0) {
@@ -36,7 +36,7 @@ export const createRasterizedImage = async ({
if (isThumbnail) scaleFactor = 0.2; // 缩略图使用较小的高清倍数
console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`);
// console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`);
// 如果有遮罩且保持原始质量，使用高质量的遮罩处理方法
if (maskObject && preserveOriginalQuality) {
@@ -58,7 +58,7 @@ export const createRasterizedImage = async ({
}
if (isReturenDataURL) {
console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL");
// console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL");
return rasterizedImage;
}
@@ -77,7 +77,7 @@ export const createRasterizedImage = async ({
},
});
console.log(`✅ 带遮罩的栅格化图像创建完成`);
// console.log(`✅ 带遮罩的栅格化图像创建完成`);
return rasterizedImage;
}
@@ -101,7 +101,7 @@ export const createRasterizedImage = async ({
}
if (isReturenDataURL) {
console.log("✅ 栅格化图像创建成功，返回DataURL");
// console.log("✅ 栅格化图像创建成功，返回DataURL");
return rasterizedImage;
}
@@ -120,7 +120,7 @@ export const createRasterizedImage = async ({
},
});
console.log(`✅ 栅格化图像创建完成`);
// console.log(`✅ 栅格化图像创建完成`);
}
return rasterizedImage;
@@ -172,7 +172,7 @@ const createRasterizedImageWithGroup = async ({
// 获取组的绝对边界框
const groupBounds = group.getBoundingRect(true, true);
console.log("📏 组边界框:", groupBounds);
// console.log("📏 组边界框:", groupBounds);
// 设置离屏画布尺寸，使用组的边界大小
const canvasWidth = Math.ceil(groupBounds.width * scaleFactor);
@@ -184,7 +184,7 @@ const createRasterizedImageWithGroup = async ({
hasControls: false,
});
console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
// console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
// 调整组的位置，让它位于画布的左上角
group.set({
@@ -266,11 +266,11 @@ const createRasterizedImageWithMask = async ({
isGroupWithMask,
}) => {
try {
console.log("🎭 使用遮罩创建栅格化图像");
// console.log("🎭 使用遮罩创建栅格化图像");
// 获取遮罩的边界框，这将作为最终图像的边界
const maskBounds = maskObject.getBoundingRect(true, true);
console.log("📏 遮罩边界框:", maskBounds);
// console.log("📏 遮罩边界框:", maskBounds);
// 克隆所有对象，并清除它们的遮罩，避免重复应用
const clonedObjects = [];
@@ -308,7 +308,7 @@ const createRasterizedImageWithMask = async ({
height: canvasHeight,
});
console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
// console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
// 调整对象位置，相对于遮罩边界重新定位
clonedObjects.forEach((obj) => {
@@ -376,7 +376,7 @@ const createRasterizedImageWithMask = async ({
// 确保图像位置正确
fabricImage.setCoords();
console.log("✅ 带遮罩的栅格化图像创建完成");
// console.log("✅ 带遮罩的栅格化图像创建完成");
return fabricImage;
} catch (error) {
console.error("带遮罩的栅格化失败:", error);
@@ -430,12 +430,12 @@ const createFabricImageFromDataURL = (dataURL) => {
*/
const applyMaskToCanvas = async (canvas, maskObject, bounds) => {
if (!maskObject) {
console.log("没有遮罩对象，跳过遮罩应用");
// console.log("没有遮罩对象，跳过遮罩应用");
return;
}
try {
console.log("🎭 应用遮罩到画布");
// console.log("🎭 应用遮罩到画布");
// 克隆遮罩对象，避免影响原对象
const clonedMask = await cloneObjectAsync(maskObject);
@@ -459,7 +459,7 @@ const applyMaskToCanvas = async (canvas, maskObject, bounds) => {
// 将遮罩设置为画布的clipPath
canvas.clipPath = clonedMask;
console.log("✅ 遮罩应用完成");
// console.log("✅ 遮罩应用完成");
} catch (error) {
console.error("应用遮罩失败:", error);
}