feat: 添加导出图层功能,支持将图层转换为位图图像并下载

This commit is contained in:
bighuixiang
2025-06-23 15:56:01 +08:00
parent 1fde475806
commit 5d0511e405
10 changed files with 405 additions and 68 deletions

View File

@@ -10,6 +10,7 @@ import {
insertObjectAtZIndex,
} from "../utils/helper";
import { fabric } from "fabric-with-all";
import { imageModeHandler } from "../utils/imageHelper";
/**
* 设置活动图层命令
@@ -725,48 +726,13 @@ export class ChangeFixedImageCommand extends Command {
});
}
// 如果是包含 则需要根据图像模式调整大小
switch (this.imageMode) {
case "stretch":
// 拉伸模式 - 填充整个画布
newImage.scaleToWidth(this.canvasWidth);
newImage.scaleToHeight(this.canvasHeight);
break;
case "tile":
// 平铺模式 - 保持原始大小
newImage.scaleX = 1;
newImage.scaleY = 1;
break;
case "stretchTile":
// 拉伸平铺模式 - 填充整个画布,但保持宽高比
newImage.scaleToWidth(this.canvasWidth);
newImage.scaleToHeight(this.canvasHeight);
break;
case "stretchTileCrop":
// 拉伸平铺并裁剪模式 - 填充整个画布,可能
// 会裁剪图像以适应画布
newImage.scaleToWidth(this.canvasWidth);
newImage.scaleToHeight(this.canvasHeight);
// 这里可以添加裁剪逻辑,如果需要的话
// 例如使用fabric.Image.clipPath来裁剪图像
break;
case "contains":
// 包含模式 - 保证图像在画布内完整显示
// 既要考虑画布的宽高比,也要考虑图像的宽高比
// 图片缩放后要保证最长边能完全显示在画布内
const canvasAspect = this.canvasWidth / this.canvasHeight;
const imageAspect = newImage.width / newImage.height;
// 保证图像在画布内完整显示 - 既要考虑画布的宽高比,也要考虑图像的宽高比
// 图片缩放后要保证最长边能完全显示在画布内
if (imageAspect > canvasAspect) {
// 图像更宽
newImage.scaleToWidth(this.canvasWidth);
} else {
// 图像更高
newImage.scaleToHeight(this.canvasHeight);
}
break;
}
// 通用处理图片模式
imageModeHandler({
imageMode: this.imageMode,
newImage,
canvasWidth: this.canvasWidth,
canvasHeight: this.canvasHeight,
});
// 使用帮助函数在指定z-index位置插入新图像
if (this.previousZIndex !== undefined && this.previousZIndex >= 0) {