浏览代码

高比宽大的图片不裁切

Michael Wang 3 年之前
父节点
当前提交
829f3f20a5
共有 1 个文件被更改,包括 31 次插入1 次删除
  1. 31 1
      src/features/mark/CommonMarkBody.vue

+ 31 - 1
src/features/mark/CommonMarkBody.vue

@@ -285,11 +285,15 @@ async function processSplitConfig() {
     images.push(image);
   }
 
+  // 裁切块,可能是一块,两块,三块... [start, width ...] => [0, 0.3] | [0, 0.55, 0.45, 0.55] | [0, 0.35, 0.33, 0.35, 0.66, 0.35]
   const splitConfigPairs = store.setting.splitConfig
     .map((v, index, ary) => (index % 2 === 0 ? [v, ary[index + 1]] : false))
     .filter((v) => v) as unknown as Array<[number, number]>;
 
-  const maxSplitConfig = Math.max(...store.setting.splitConfig);
+  // 最大的 splitConfig 的宽度
+  const maxSplitConfig = Math.max(
+    ...store.setting.splitConfig.filter((v, i) => i % 2)
+  );
   maxSliceWidth =
     Math.max(...images.map((v) => v.naturalWidth)) * maxSplitConfig;
 
@@ -297,6 +301,21 @@ async function processSplitConfig() {
     splitConfigPairs.length *
     images.reduce((acc, v) => (acc += v.naturalHeight), 0);
 
+  // 高度比宽度大的图片不裁切
+  const imagesOfBiggerHeight = images.filter(
+    (v) => v.naturalHeight > v.naturalWidth
+  );
+  if (imagesOfBiggerHeight.length > 0) {
+    maxSliceWidth = Math.max(
+      maxSliceWidth,
+      ...imagesOfBiggerHeight.map((v) => v.naturalWidth)
+    );
+    // 不裁切的图剪切多加的高度
+    theFinalHeight -=
+      imagesOfBiggerHeight.map((v) => v.naturalHeight).reduce((p, c) => p + c) *
+      (splitConfigPairs.length - 1);
+  }
+
   let accumTopHeight = 0;
   let accumBottomHeight = 0;
   const tempSliceImagesWithTrackList = [] as Array<SliceImage>;
@@ -304,6 +323,12 @@ async function processSplitConfig() {
     for (const config of splitConfigPairs) {
       const indexInSliceUrls = store.currentTask.sliceUrls.indexOf(url) + 1;
       const image = images[indexInSliceUrls - 1];
+      let shouldBreak = false;
+      if (image.naturalHeight > image.naturalWidth) {
+        config[0] = 0;
+        config[1] = 1;
+        shouldBreak = true;
+      }
 
       accumBottomHeight += image.naturalHeight;
 
@@ -363,6 +388,11 @@ async function processSplitConfig() {
         effectiveWidth: image.naturalWidth * config[1],
       });
       accumTopHeight = accumBottomHeight;
+
+      // 如果本图高比宽大,不该裁切,则跳过多次裁切
+      if (shouldBreak) {
+        break;
+      }
     }
   }
   sliceImagesWithTrackList.push(...tempSliceImagesWithTrackList);