导出印花等所有信息

This commit is contained in:
李志鹏
2026-01-06 14:17:04 +08:00
parent 73aca07391
commit 466d278b29
12 changed files with 301 additions and 111 deletions

View File

@@ -1,7 +1,7 @@
import { fabric } from "fabric-with-all";
import { findObjectById } from "../utils/helper";
import { createRasterizedImage } from "../utils/selectionToImage";
import { OperationType, SpecialLayerId } from "../utils/layerHelper";
import { OperationType, SpecialLayerId } from "../utils/layerHelper";
/**
* 图片导出管理器
@@ -26,7 +26,8 @@ export class ExportManager {
* @param {Array} options.layerIdArray2 导出多个图层ID数组2
* @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
* @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
* @param {Boolean} options.isEnhanceImg 是否是增强图片
* @param {Boolean} options.isEnhanceImg 是否是增强图片
* @param {Array} options.excludedLayers 排除的图层ID数组
* @returns {String} 导出的图片数据URL
*/
async exportImage(options = {}) {
@@ -41,6 +42,7 @@ export class ExportManager {
expPicType = "png",
restoreOpacityInRedGreen = true,
isEnhanceImg, // 是否是增强图片
excludedLayers = [], // 排除的图层ID数组
} = options;
try {
// 查找颜色图层并隐藏
@@ -90,6 +92,7 @@ export class ExportManager {
isCropByBg,
isEnhanceImg, // 是否是增强图片
layerIdArray2,
excludedLayers, // 排除的图层ID数组
);
} catch (error) {
console.error("导出图片失败:", error);
@@ -240,7 +243,8 @@ export class ExportManager {
restoreOpacityInRedGreen,
isCropByBg, // 是否使用背景大小裁剪
isEnhanceImg, // 是否是增强图片
layerIdArray,
layerIdArray, // 导出所有图层
excludedLayers, // 排除的图层ID数组
) {
// 按图层顺序收集对象(从底到顶)
const objectsToExport = this._collectObjectsByLayerOrder(
@@ -248,6 +252,7 @@ export class ExportManager {
isContainBg,
isContainFixed,
isContainFixedOther, // 是否包含其他固定图层
excludedLayers,
);
if (objectsToExport.length === 0) {
@@ -303,10 +308,11 @@ export class ExportManager {
/**
* 从图层收集对象(优化版本 - 通过ID查找画布中的真实对象
* @param {Object} layer 图层对象
* @param {Boolean} isChildren 是否递归收集子图层的对象
* @returns {Array} 画布中的真实对象数组
* @private
*/
_collectObjectsFromLayer(layer) {
_collectObjectsFromLayer(layer, isChildren = true) {
if (!layer) {
return [];
}
@@ -335,10 +341,10 @@ export class ExportManager {
}
// 递归收集子图层的对象
if (layer.children && layer.children.length > 0) {
if (isChildren && layer.children && layer.children.length > 0) {
for (let i = layer.children.length - 1; i >= 0; i--) {
const childLayer = layer.children[i];
const childObjects = this._collectObjectsFromLayer(childLayer);
const childObjects = this._collectObjectsFromLayer(childLayer, isChildren);
realObjects.push(...childObjects);
}
}
@@ -405,12 +411,13 @@ export class ExportManager {
* @param {Boolean} isContainBg 是否包含背景图层
* @param {Boolean} isContainFixed 是否包含固定图层
* @param {Boolean} isContainFixedOther 是否包含其他固定图层
* @param {Array} excludedLayers 排除的图层ID数组
* @returns {Array} 按正确顺序排列的真实对象数组
* @private
*/
_collectObjectsByLayerOrder(layerIdArray, isContainBg, isContainFixed, isContainFixedOther) {
_collectObjectsByLayerOrder(layerIdArray, isContainBg, isContainFixed, isContainFixedOther, excludedLayers) {
const objectsToExport = [];
const allLayers = this._getAllLayersFlattened(); // 获取扁平化的图层列表
const allLayers = this._getAllLayersFlattened(excludedLayers); // 获取扁平化的图层列表
// 图层数组是从顶到底的顺序,需要反向遍历以获得从底到顶的渲染顺序
for (let i = allLayers.length - 1; i >= 0; i--) {
@@ -424,7 +431,7 @@ export class ExportManager {
continue;
if (layer.visible) {
const layerObjects = this._collectObjectsFromLayer(layer);
const layerObjects = this._collectObjectsFromLayer(layer, false);
objectsToExport.push(...layerObjects);
}
}
@@ -433,15 +440,19 @@ export class ExportManager {
}
/**
* 获取扁平化的图层列表(包含子图层)
* 获取扁平化的图层列表(包含子图层),排除指定的图层
* @param {Array} excludedLayers 排除的图层ID数组
* @returns {Array} 扁平化的图层数组
* @private
*/
_getAllLayersFlattened() {
_getAllLayersFlattened(excludedLayers) {
const flattenedLayers = [];
const rootLayers = this._getAllLayers();
const flattenLayer = (layer) => {
// 检查是否在排除列表中
if (excludedLayers && excludedLayers.includes(layer.id)) return;
flattenedLayers.push(layer);
// 递归处理子图层
@@ -456,7 +467,6 @@ export class ExportManager {
for (const layer of rootLayers) {
flattenLayer(layer);
}
return flattenedLayers;
}