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

@@ -2192,3 +2192,60 @@ function _getAlternativeMethods(analysis) {
return alternatives;
}
/** * 图像模式处理函数
* 根据不同的图像模式调整图像大小和位置
* @param {Object} params - 参数对象
* @param {string} params.imageMode - 图像模式
* @param {fabric.Image} params.newImage - 新图像对象
* @param {number} params.canvasWidth - 画布宽度
* @param {number} params.canvasHeight - 画布高度
*/
export const imageModeHandler = ({
imageMode,
newImage,
canvasWidth,
canvasHeight,
}) => {
switch (imageMode) {
case "stretch":
// 拉伸模式 - 填充整个画布
newImage.scaleToWidth(canvasWidth);
newImage.scaleToHeight(canvasHeight);
break;
case "tile":
// 平铺模式 - 保持原始大小
newImage.scaleX = 1;
newImage.scaleY = 1;
break;
case "stretchTile":
// 拉伸平铺模式 - 填充整个画布,但保持宽高比
newImage.scaleToWidth(canvasWidth);
newImage.scaleToHeight(canvasHeight);
break;
case "stretchTileCrop":
// 拉伸平铺并裁剪模式 - 填充整个画布,可能
// 会裁剪图像以适应画布
newImage.scaleToWidth(canvasWidth);
newImage.scaleToHeight(canvasHeight);
// 这里可以添加裁剪逻辑,如果需要的话
// 例如使用fabric.Image.clipPath来裁剪图像
break;
case "contains":
// 包含模式 - 保证图像在画布内完整显示
// 既要考虑画布的宽高比,也要考虑图像的宽高比
// 图片缩放后要保证最长边能完全显示在画布内
const canvasAspect = canvasWidth / canvasHeight;
const imageAspect = newImage.width / newImage.height;
// 保证图像在画布内完整显示 - 既要考虑画布的宽高比,也要考虑图像的宽高比
// 图片缩放后要保证最长边能完全显示在画布内
if (imageAspect > canvasAspect) {
// 图像更宽
newImage.scaleToWidth(canvasWidth);
} else {
// 图像更高
newImage.scaleToHeight(canvasHeight);
}
break;
}
};