evomeme-dev 0.1.7

package/dist/canvas-public/smart-split.js

@@ -0,0 +1,185 @@
+/**
+ * 智能切分：从一张含多主体的图中提取连通区域，按阅读顺序返回裁切 dataURL。
+ * 纯浏览器 Canvas，无外部依赖。
+ */
+
+function isForeground(r, g, b, a, bg) {
+  if (a < 24) return false
+  // 相对背景色差够大才算前景（兼容白底 / 棋盘格近似色）
+  const dr = r - bg.r
+  const dg = g - bg.g
+  const db = b - bg.b
+  const dist = Math.sqrt(dr * dr + dg * dg + db * db)
+  return dist > 28 || a < 250 && a > 24
+}
+
+function sampleBackground(data, w, h) {
+  // 取四角均值作为背景估计
+  const pts = [
+    [0, 0],
+    [w - 1, 0],
+    [0, h - 1],
+    [w - 1, h - 1],
+    [Math.floor(w / 2), 0],
+    [0, Math.floor(h / 2)],
+  ]
+  let r = 0
+  let g = 0
+  let b = 0
+  let n = 0
+  for (const [x, y] of pts) {
+    const i = (y * w + x) * 4
+    r += data[i]
+    g += data[i + 1]
+    b += data[i + 2]
+    n += 1
+  }
+  return { r: r / n, g: g / n, b: b / n }
+}
+
+function loadImageElement(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => resolve(img)
+    img.onerror = () => reject(new Error('图片加载失败'))
+    img.src = url
+  })
+}
+
+/**
+ * @param {string} imageUrl
+ * @returns {Promise<string[]>} PNG dataURL 列表（至少 2 张才有意义；找不到则空数组）
+ */
+export async function smartSplitImage(imageUrl) {
+  const img = await loadImageElement(imageUrl)
+  const maxSide = 1600
+  const scale = Math.min(1, maxSide / Math.max(img.naturalWidth, img.naturalHeight))
+  const w = Math.max(1, Math.round(img.naturalWidth * scale))
+  const h = Math.max(1, Math.round(img.naturalHeight * scale))
+
+  const canvas = document.createElement('canvas')
+  canvas.width = w
+  canvas.height = h
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  ctx.drawImage(img, 0, 0, w, h)
+  const { data } = ctx.getImageData(0, 0, w, h)
+  const bg = sampleBackground(data, w, h)
+
+  const visited = new Uint8Array(w * h)
+  const boxes = []
+  const minArea = Math.max(64, Math.floor((w * h) / 800))
+  const queue = new Int32Array(w * h)
+
+  for (let y = 0; y < h; y += 1) {
+    for (let x = 0; x < w; x += 1) {
+      const start = y * w + x
+      if (visited[start]) continue
+      const i0 = start * 4
+      if (!isForeground(data[i0], data[i0 + 1], data[i0 + 2], data[i0 + 3], bg)) {
+        visited[start] = 1
+        continue
+      }
+
+      let qh = 0
+      let qt = 0
+      queue[qt++] = start
+      visited[start] = 1
+      let minX = x
+      let maxX = x
+      let minY = y
+      let maxY = y
+      let area = 0
+
+      while (qh < qt) {
+        const p = queue[qh++]
+        const px = p % w
+        const py = (p / w) | 0
+        area += 1
+        if (px < minX) minX = px
+        if (px > maxX) maxX = px
+        if (py < minY) minY = py
+        if (py > maxY) maxY = py
+
+        const neighbors = [p - 1, p + 1, p - w, p + w]
+        for (const n of neighbors) {
+          if (n < 0 || n >= w * h) continue
+          if (visited[n]) continue
+          const nx = n % w
+          const ny = (n / w) | 0
+          // 防跨行左右邻居
+          if (Math.abs(nx - px) + Math.abs(ny - py) !== 1) continue
+          const ni = n * 4
+          if (!isForeground(data[ni], data[ni + 1], data[ni + 2], data[ni + 3], bg)) {
+            visited[n] = 1
+            continue
+          }
+          visited[n] = 1
+          queue[qt++] = n
+        }
+      }
+
+      const bw = maxX - minX + 1
+      const bh = maxY - minY + 1
+      if (area >= minArea && bw >= 8 && bh >= 8) {
+        // 过滤几乎铺满整图的单一大块（切不出多图）
+        if (bw * bh < w * h * 0.92) {
+          boxes.push({ minX, minY, maxX, maxY, area })
+        }
+      }
+    }
+  }
+
+  if (boxes.length < 2) return []
+
+  // 阅读顺序：先上后下，同行按左到右
+  const rowTol = Math.max(12, Math.floor(h * 0.03))
+  boxes.sort((a, b) => {
+    if (Math.abs(a.minY - b.minY) > rowTol) return a.minY - b.minY
+    return a.minX - b.minX
+  })
+
+  // 原图尺寸裁切（更高清），并统一到完全相同的画布尺寸，保证序列播放不抖动
+  const inv = 1 / scale
+  const crops = []
+  for (const box of boxes) {
+    const sx = Math.max(0, Math.floor(box.minX * inv))
+    const sy = Math.max(0, Math.floor(box.minY * inv))
+    const sw = Math.min(img.naturalWidth - sx, Math.ceil((box.maxX - box.minX + 1) * inv))
+    const sh = Math.min(img.naturalHeight - sy, Math.ceil((box.maxY - box.minY + 1) * inv))
+    if (sw < 4 || sh < 4) continue
+    crops.push({ sx, sy, sw, sh })
+  }
+  if (crops.length < 2) return []
+
+  // 统一尺寸：先按最高补上方白边，再按最宽左右均匀补白边
+  const frameW = Math.max(...crops.map((c) => c.sw))
+  const frameH = Math.max(...crops.map((c) => c.sh))
+  const full = document.createElement('canvas')
+  full.width = frameW
+  full.height = frameH
+  const fctx = full.getContext('2d')
+
+  const out = []
+  for (const crop of crops) {
+    fctx.fillStyle = '#ffffff'
+    fctx.fillRect(0, 0, frameW, frameH)
+    const padTop = frameH - crop.sh
+    const padX = frameW - crop.sw
+    const dx = Math.floor(padX / 2)
+    const dy = padTop
+    fctx.drawImage(
+      img,
+      crop.sx,
+      crop.sy,
+      crop.sw,
+      crop.sh,
+      dx,
+      dy,
+      crop.sw,
+      crop.sh,
+    )
+    out.push(full.toDataURL('image/png'))
+  }
+  return out
+}