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

fix: 修改红绿图模式下透明度恢复的默认值，优化导出逻辑

Browse Source
This commit is contained in:
bighuixiang
2025-07-22 21:40:39 +08:00
parent 46ef450dfb
commit 4170cae964
4 changed files with 108 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,7 @@ export const createRasterizedImage = async ({
isReturenDataURL = false, // 是否返回DataURL而不是fabric.Image对象
preserveOriginalQuality = true, // 是否保持原始质量（新增）
selectionManager = null, // 选区管理器，用于获取羽化值等设置
restoreOpacityInRedGreen, // 是否在红绿图模式下恢复透明度
} = {}) => {
try {
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);
@@ -85,12 +86,18 @@ const createClippedObjects = async ({
console.log("🎯 使用新的图像遮罩裁剪方法创建对象");
// 使用优化后的边界计算，确保包含描边区域
const optimizedBounds = calculateOptimizedBounds(clippingObject, fabricObjects);
const optimizedBounds = calculateOptimizedBounds(
clippingObject,
fabricObjects
);
console.log("📐 优化后的选区边界框:", optimizedBounds);
// 获取羽化值
let featherAmount = 0;
if (selectionManager && typeof selectionManager.getFeatherAmount === "function") {
if (
selectionManager &&
typeof selectionManager.getFeatherAmount === "function"
) {
featherAmount = selectionManager.getFeatherAmount();
console.log(`🌟 应用羽化效果: ${featherAmount}px`);
}
@@ -171,7 +178,10 @@ const createClippedDataURLByCanvas = async ({
console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
// 使用优化后的边界计算，确保包含描边区域
const optimizedBounds = calculateOptimizedBounds(clippingObject, fabricObjects);
const optimizedBounds = calculateOptimizedBounds(
clippingObject,
fabricObjects
);
// 使用高分辨率以保证质量
const pixelRatio = window.devicePixelRatio || 1;
@@ -230,7 +240,13 @@ const createClippedDataURLByCanvas = async ({
* 创建简单克隆对象
* 当不需要裁剪时，直接克隆原对象
*/
const createSimpleClone = async ({ canvas, fabricObjects, isReturenDataURL, quality, format }) => {
const createSimpleClone = async ({
canvas,
fabricObjects,
isReturenDataURL,
quality,
format,
}) => {
try {
console.log("📋 创建简单克隆对象");
@@ -444,7 +460,10 @@ const createLegacyRasterization = async ({
// 这里保留原有的离屏渲染逻辑作为备选方案
const currentZoom = canvas.getZoom?.() || 1;
scaleFactor = Math.max(scaleFactor || canvas?.getRetinaScaling?.(), currentZoom);
scaleFactor = Math.max(
scaleFactor || canvas?.getRetinaScaling?.(),
currentZoom
);
scaleFactor = Math.min(scaleFactor, 3);
const { absoluteBounds, relativeBounds } = calculateBounds(fabricObjects);
@@ -574,7 +593,9 @@ const createOffscreenRasterization = async ({
height: canvasHeight,
});
console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
console.log(
`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`
);
// 克隆对象到离屏画布
const clonedObjects = [];
@@ -729,7 +750,11 @@ export const getObjectsBounds = (fabricObjects) => {
* @param {Number} qualityMultiplier 质量倍数
* @returns {Promise<String>} 遮罩图像的DataURL
*/
const createMaskImageFromPath = async ({ clippingObject, selectionBounds, qualityMultiplier }) => {
const createMaskImageFromPath = async ({
clippingObject,
selectionBounds,
qualityMultiplier,
}) => {
try {
console.log("🎭 创建路径遮罩图像");
@@ -745,7 +770,11 @@ const createMaskImageFromPath = async ({ clippingObject, selectionBounds, qualit
});
// 克隆路径对象并处理描边转填充
const maskPath = await createSolidMaskPath(clippingObject, selectionBounds, qualityMultiplier);
const maskPath = await createSolidMaskPath(
clippingObject,
selectionBounds,
qualityMultiplier
);
// 添加路径到遮罩画布
maskCanvas.add(maskPath);
@@ -776,7 +805,11 @@ const createMaskImageFromPath = async ({ clippingObject, selectionBounds, qualit
* @param {Number} qualityMultiplier 质量倍数
* @returns {Promise<String>} 内容图像的DataURL
*/
const renderContentToImage = async ({ fabricObjects, selectionBounds, qualityMultiplier }) => {
const renderContentToImage = async ({
fabricObjects,
selectionBounds,
qualityMultiplier,
}) => {
try {
console.log("🖼️ 渲染内容图像");
@@ -808,8 +841,11 @@ const renderContentToImage = async ({ fabricObjects, selectionBounds, qualityMul
// 如果有裁剪路径，也需要调整裁剪路径
if (clonedObj.clipPath) {
clonedObj.clipPath.set({
left: (clonedObj.clipPath.left - selectionBounds.left) * qualityMultiplier,
top: (clonedObj.clipPath.top - selectionBounds.top) * qualityMultiplier,
left:
(clonedObj.clipPath.left - selectionBounds.left) *
qualityMultiplier,
top:
(clonedObj.clipPath.top - selectionBounds.top) * qualityMultiplier,
scaleX: (clonedObj.clipPath.scaleX || 1) * qualityMultiplier,
scaleY: (clonedObj.clipPath.scaleY || 1) * qualityMultiplier,
});
@@ -943,7 +979,11 @@ const createAdvancedMaskImage = async ({
});
// 克隆路径对象并处理描边转填充
const maskPath = await createSolidMaskPath(clippingObject, selectionBounds, qualityMultiplier);
const maskPath = await createSolidMaskPath(
clippingObject,
selectionBounds,
qualityMultiplier
);
// 如果有羽化值，添加模糊效果
if (featherAmount > 0) {
@@ -962,7 +1002,10 @@ const createAdvancedMaskImage = async ({
// 如果有羽化，需要进行后处理
if (featherAmount > 0) {
return await applyCanvasBlur(maskCanvas, featherAmount * qualityMultiplier);
return await applyCanvasBlur(
maskCanvas,
featherAmount * qualityMultiplier
);
}
// 生成遮罩图像
@@ -1038,7 +1081,11 @@ const applyCanvasBlur = async (canvas, blurAmount) => {
* @param {Number} qualityMultiplier 质量倍数
* @returns {Promise<fabric.Object>} 处理后的遮罩路径对象
*/
const createSolidMaskPath = async (clippingObject, selectionBounds, qualityMultiplier) => {
const createSolidMaskPath = async (
clippingObject,
selectionBounds,
qualityMultiplier
) => {
try {
console.log("🔧 创建实体遮罩路径，处理描边转填充");
@@ -1049,19 +1096,29 @@ const createSolidMaskPath = async (clippingObject, selectionBounds, qualityMulti
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;
// 方法1: 如果是简单的几何形状（矩形、圆形等），可以通过调整尺寸来补偿描边
if (maskPath.type === "rect" || maskPath.type === "circle" || maskPath.type === "ellipse") {
if (
maskPath.type === "rect" ||
maskPath.type === "circle" ||
maskPath.type === "ellipse"
) {
// 对于矩形和椭圆，增加宽高来包含描边
const strokeOffset = strokeWidth;
maskPath.set({
left: (maskPath.left - selectionBounds.left - strokeOffset / 2) * qualityMultiplier,
top: (maskPath.top - selectionBounds.top - strokeOffset / 2) * qualityMultiplier,
left:
(maskPath.left - selectionBounds.left - strokeOffset / 2) *
qualityMultiplier,
top:
(maskPath.top - selectionBounds.top - strokeOffset / 2) *
qualityMultiplier,
scaleX: (maskPath.scaleX || 1) * qualityMultiplier,
scaleY: (maskPath.scaleY || 1) * qualityMultiplier,
width: (maskPath.width || 0) + strokeOffset,
@@ -1080,8 +1137,12 @@ const createSolidMaskPath = async (clippingObject, selectionBounds, qualityMulti
const strokeOffset = strokeWidth / 2;
maskPath.set({
left: (maskPath.left - selectionBounds.left - strokeOffset) * qualityMultiplier,
top: (maskPath.top - selectionBounds.top - strokeOffset) * qualityMultiplier,
left:
(maskPath.left - selectionBounds.left - strokeOffset) *
qualityMultiplier,
top:
(maskPath.top - selectionBounds.top - strokeOffset) *
qualityMultiplier,
scaleX: (maskPath.scaleX || 1) * qualityMultiplier * expandRatio,
scaleY: (maskPath.scaleY || 1) * qualityMultiplier * expandRatio,
fill: "#ffffff",