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

解决画布打开图片导出图片分辨率不一值问题

Browse Source
This commit is contained in:
李志鹏
2025-09-25 13:52:05 +08:00
parent 15cb0c86e7
commit 564b75de61
7 changed files with 98 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -456,6 +456,13 @@ onMounted(async () => {
// 使用window的resize事件代替ResizeObserver
// 只有当窗口大小变化时才更新画布尺寸
// window.addEventListener("resize", handleWindowResize);
if(props.config.initZoom) {
const width = canvasManager.width;
const height = canvasManager.height;
const cwidth = props.config.width;
const cheight = props.config.height;
setZoom(Math.min(width/cwidth,height/cheight)); // 设置画布缩放
}
});
watchEffect(() => {
@@ -521,6 +528,19 @@ function resetZoom() {
canvasManager.resetZoom();
}
function setZoom(zoom) {
setTimeout(()=>{
if (!canvasManager) return;
const newZoom = Math.max(zoom / 1.1, 0.1); // 减少10%，最小0.1倍
// 使用画布中心作为缩放点
const centerPoint = {
x: canvasManager.canvas.width / 2,
y: canvasManager.canvas.height / 2,
};
canvasManager.animateZoom(centerPoint, newZoom);
})
}
function zoomIn() {
if (!canvasManager) return;
@@ -882,6 +902,7 @@ defineExpose({
layerId = "", // 导出具体图层ID
layerIdArray = [], // 导出多个图层ID数组
expPicType = "png", // 导出图片类型 JPG 或 PNG ,SVG
isEnhanceImg, // 是否是增强图片
} = {}) => {
return canvasManager.exportImage({
isContainBg,
@@ -890,6 +911,7 @@ defineExpose({
layerId,
layerIdArray,
expPicType,
isEnhanceImg,
});
},
/**

1
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -811,6 +811,7 @@ export class CanvasManager {
* @param {Array} options.layerIdArray 导出多个图层ID数组
* @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
* @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
* @param {Boolean} options.isEnhanceImg 是否是增强图片
* @returns {String} 导出的图片数据URL
*/
async exportImage(options = {}) {

49
src/component/Canvas/CanvasEditor/managers/ExportManager.js
View File

@@ -18,10 +18,12 @@ export class ExportManager {
* @param {Object} options 导出选项
* @param {Boolean} options.isContainBg 是否包含背景图层
* @param {Boolean} options.isContainFixed 是否包含固定图层
* @param {Boolean} options.isCropByBg 是否使用背景大小裁剪
* @param {String} options.layerId 导出具体图层ID
* @param {Array} options.layerIdArray 导出多个图层ID数组
* @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
* @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
* @param {Boolean} options.isEnhanceImg 是否是增强图片
* @returns {String} 导出的图片数据URL
*/
exportImage(options = {}) {
@@ -33,6 +35,7 @@ export class ExportManager {
layerIdArray = [],
expPicType = "png",
restoreOpacityInRedGreen = true,
isEnhanceImg, // 是否是增强图片
} = options;
try {
// 检查是否为红绿图模式
@@ -44,7 +47,8 @@ export class ExportManager {
expPicType,
isRedGreenMode,
restoreOpacityInRedGreen,
isCropByBg
isCropByBg,
isEnhanceImg, // 是否是增强图片
);
}
@@ -57,7 +61,8 @@ export class ExportManager {
isContainFixed,
isRedGreenMode,
restoreOpacityInRedGreen,
isCropByBg
isCropByBg,
isEnhanceImg, // 是否是增强图片
);
}
@@ -68,7 +73,8 @@ export class ExportManager {
isContainFixed,
isRedGreenMode,
restoreOpacityInRedGreen,
isCropByBg
isCropByBg,
isEnhanceImg, // 是否是增强图片
);
} catch (error) {
console.error("导出图片失败:", error);
@@ -82,6 +88,8 @@ export class ExportManager {
* @param {String} expPicType 导出类型
* @param {Boolean} isRedGreenMode 是否为红绿图模式
* @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
* @param {Boolean} isCropByBg 是否使用背景大小裁剪
* @param {Boolean} isEnhanceImg 是否是增强图片
* @returns {String} 图片数据URL
* @private
*/
@@ -89,7 +97,9 @@ export class ExportManager {
layerId,
expPicType,
isRedGreenMode,
restoreOpacityInRedGreen
restoreOpacityInRedGreen,
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
) {
if (!this.layerManager) {
throw new Error("图层管理器未初始化");
@@ -117,7 +127,9 @@ export class ExportManager {
return this._exportWithRedGreenMode(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
restoreOpacityInRedGreen,
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
);
}
@@ -137,6 +149,8 @@ export class ExportManager {
* @param {Boolean} isContainFixed 是否包含固定图层
* @param {Boolean} isRedGreenMode 是否为红绿图模式
* @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
* @param {Boolean} isCropByBg 是否使用背景大小裁剪
* @param {Boolean} isEnhanceImg 是否是增强图片
* @returns {String} 图片数据URL
* @private
*/
@@ -147,7 +161,8 @@ export class ExportManager {
isContainFixed,
isRedGreenMode,
restoreOpacityInRedGreen,
isCropByBg
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
) {
if (!this.layerManager) {
throw new Error("图层管理器未初始化");
@@ -178,7 +193,9 @@ export class ExportManager {
return await this._exportWithCanvasSize(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
restoreOpacityInRedGreen,
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
);
}
@@ -189,6 +206,8 @@ export class ExportManager {
* @param {Boolean} isContainFixed 是否包含固定图层
* @param {Boolean} isRedGreenMode 是否为红绿图模式
* @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
* @param {Boolean} isCropByBg 是否使用背景大小裁剪
* @param {Boolean} isEnhanceImg 是否是增强图片
* @returns {String} 图片数据URL
* @private
*/
@@ -198,7 +217,8 @@ export class ExportManager {
isContainFixed,
isRedGreenMode,
restoreOpacityInRedGreen,
isCropByBg
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
) {
// 按图层顺序收集对象（从底到顶）
const objectsToExport = this._collectObjectsByLayerOrder(
@@ -251,7 +271,9 @@ export class ExportManager {
objectsToExport,
expPicType,
restoreOpacityInRedGreen,
canvasClipPath
canvasClipPath,
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
);
}
@@ -603,6 +625,9 @@ export class ExportManager {
* @param {Array} objectsToExport 要导出的对象数组
* @param {String} expPicType 导出类型
* @param {Boolean} restoreOpacityInRedGreen 是否恢复透明度为1
* @param {Object} maskObject 裁剪对象
* @param {Boolean} isCropByBg 是否使用背景大小裁剪
* @param {Boolean} isEnhanceImg 是否是增强图片
* @returns {String} 图片数据URL
* @private
*/
@@ -610,7 +635,9 @@ export class ExportManager {
objectsToExport,
expPicType,
restoreOpacityInRedGreen,
maskObject
maskObject, // 裁剪对象
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
) {
// 使用当前画布尺寸
// const canvasWidth =
@@ -629,6 +656,8 @@ export class ExportManager {
trimWhitespace: true, // 裁剪空白
trimPadding: 0, // 裁剪边距
restoreOpacityInRedGreen,
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
});
console.log("导出图片数据URL:", dataURL);

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

@@ -21,6 +21,7 @@ export const createRasterizedImage = async ({
preserveOriginalQuality = true, // 是否保持原始质量（新增）
selectionManager = null, // 选区管理器，用于获取羽化值等设置
restoreOpacityInRedGreen, // 是否在红绿图模式下恢复透明度
isEnhanceImg, // 是否是增强图片
} = {}) => {
try {
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);
@@ -41,6 +42,7 @@ export const createRasterizedImage = async ({
clippingObject,
isReturenDataURL,
selectionManager, // 传递选区管理器
isEnhanceImg, // 是否是增强图片
});
}
@@ -81,6 +83,7 @@ const createClippedObjects = async ({
clippingObject,
isReturenDataURL,
selectionManager = null, // 新增选区管理器参数
isEnhanceImg, // 是否是增强图片
}) => {
try {
console.log("🎯 使用新的图像遮罩裁剪方法创建对象");
@@ -110,6 +113,7 @@ const createClippedObjects = async ({
clippingObject,
selectionBounds: optimizedBounds, // 使用优化后的边界框
featherAmount,
isEnhanceImg, // 是否是增强图片
});
}
@@ -120,6 +124,7 @@ const createClippedObjects = async ({
clippingObject,
selectionBounds: optimizedBounds, // 使用优化后的边界框
featherAmount,
isEnhanceImg, // 是否是增强图片
});
// 将DataURL转换为fabric.Image对象
@@ -173,6 +178,7 @@ const createClippedDataURLByCanvas = async ({
clippingObject,
selectionBounds,
featherAmount = 0,
isEnhanceImg = false, // 是否是增强图片
}) => {
try {
console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
@@ -185,7 +191,9 @@ const createClippedDataURLByCanvas = async ({
// 使用高分辨率以保证质量
const pixelRatio = window.devicePixelRatio || 1;
const qualityMultiplier = Math.max(2, pixelRatio);
const qualityMultiplier = !!isEnhanceImg ? Math.max(2, pixelRatio) : 1;
console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds);
const canvasWidth = Math.ceil(optimizedBounds.width * qualityMultiplier);
const canvasHeight = Math.ceil(optimizedBounds.height * qualityMultiplier);
@@ -455,6 +463,8 @@ const createLegacyRasterization = async ({
quality,
format,
isReturenDataURL,
isCropByBg, // 是否根据背景裁剪
isEnhanceImg, // 是否是增强图片
}) => {
console.log("⚠️ 使用兼容的离屏渲染方法");
@@ -481,6 +491,8 @@ const createLegacyRasterization = async ({
format,
currentZoom,
isReturenDataURL,
isCropByBg, // 是否根据背景裁剪
isEnhanceImg, // 是否是增强图片
});
};
@@ -571,6 +583,8 @@ const createOffscreenRasterization = async ({
format,
currentZoom,
isReturenDataURL,
isCropByBg, // 是否根据背景裁剪
isEnhanceImg, // 是否是增强图片
}) => {
try {
// 创建离屏画布，使用绝对尺寸以保证高质量