杂记 › 生活随笔 › 横图裁掉 25%、竖图裁掉 43.75%:7 个拼图模板逐格算一笔几何账

横图裁掉 25%、竖图裁掉 43.75%:7 个拼图模板逐格算一笔几何账

这笔账的入口:格子全是正方形

同一批照片进方格,横着拍的被裁掉 25%,竖着拍的被裁掉 43.75%,正方形构图一点没动。差异不在模板——7 个模板(templates 数组 line 86-94)的格子全是正方形,slotRatio 恒为 1:形状类 line 305 的 pw/ph 相等,网格类 line 340 的 300/300。被裁的百分比只与源图长宽比有关,模板之间只差目标边长,网格类恒 300、默认形状类 592。

横、竖、方各丢多少

裁切分支在 line 343-347:横图沿宽左右各裁,竖图沿高上下各裁,方图不需要偏移。

源图保留边偏移量保留丢掉丢掉的像素
4032×30243024×3024sx 50475%25%3,048,192
1080×19201080×1080sy 42056.25%43.75%907,200
640×640640×640sx/sy 0全留0%0
图 1 丢弃比例只跟长宽比有关 4032×3024 丢 25% 1080×1920 丢 43.75% 640×640 丢 0% 方格边长 = 短边

混合方向只能一格一算

3 横 + 3 竖 + 3 方进 grid-3x3(gap 8),逐格抓 drawImage 的源矩形,合计源像素 44,027,904、用掉 32,161,728、丢掉 11,866,176,整批 dropPct 26.9515。这一个数底下并存三种答案:横 25%、竖 43.75%、方 0%。grid-2x2 的 gap 0 放横/竖/方/动图各一张,画布只有 600×600,4 种裁法共存。换模板在拼图页里只换格位与边长,不换裁多少。

画布尺寸由公式现算

网格类走 line 245-247 的 totalW=cols*300+(cols+1)*gap 与 cellW=cellH=300:gap 0 / 8 / 40 下 grid-2x2 是 600×600 / 624×624 / 720×720,grid-3x3 是 900×900 / 932×932 / 1060×1060;条带类的格数等于张数,strip-h 放 300 张就是 92408×316。形状类走 line 286-287 的 cellSize=floor(canvasW/density) 再减 gap,1200 配密度 2 得 600→592,格子数恒为 density*(density+1),即 6 / 12 / 30 / 110 / 420。

间距削背景,形状削大半

先数与背景同色的像素:grid-2x2 gap 8 的 624×624 = 389,376 px 里底色只有 29,376 px(7.5444%),墨占 92.4556%;gap 40 的 518,400 px 里底色 158,400 px。圆角也几乎不占量:3×3 半径 30 一共只少画 6,696 px、利用率 99.1733%。

形状类才真的吃像素。默认参数(形状大小 60、密度 2)的 1,440,000 px 成品里,墨占比圆形 22.543%、心形 48.9476%、菱形 12.6408%,其余全是用户选的底色。

放大端没有质量控制

模板全文没有一处 imageSmoothingEnabled / imageSmoothingQuality 赋值(grep 0 命中),每次 drawImage 读回 enabled=true、quality=low。1×1 的透明点在网格里被拉成 300×300(shareOfSrc 90000)、在默认形状里拉成 592×592;反向看,4032×3024 落到 300×300 的单格里只留下 0.74% 的像素(shareOfSrc 0.0074)。拉 300 倍与缩到 300 走同一条浏览器默认路径,既没有降质开关,也没有画质参数。

格子数写死,张数不写

2 / 9 / 16 / 30 / 60 张全部被接收,一次 input 选 300 张也一样,代码里没有 files.length 判定分支;UU.toast 全文只有 line 140 / 376 / 384 三处,逐字是「请上传图片文件」「请先上传图片」「拼图已下载」。格子数却写死:grid-2x2 恒 4 格、grid-3x3 恒 9 格、形状类默认密度 2 恒 6 格。5 张互不相同的图进 grid-2x2,实际画出的只有前 4 张,第 5 张(300×400)从未出现在 drawImage 记录里,信息行却仍写「624 × 624 px | 5 张」。图少于格子时按 line 328 的 (r*cols+c) % colImages.length 重复取用。两种不匹配都不留空格、也不提示。

导出只有一条 PNG 通道

toBlob 第 2 参恒 image/png(line 385)、第 3 参未传(reqQuality 实测 undefined),回调 blob.type 也是 image/png。9 次 createImageBitmap 回读的 decodedW/H 与当时 canvas.width/height 逐对相等;界面上的 680 只是 CSS(line 355-358 的 dispScale 封顶 1),不存在第二次缩放。成品尺寸等于画布尺寸,网格类单格恒 300×300,4 张 4032×3024 拼出来只有 389,376 px——站点文案里那句「导出高清PNG拼图」只能当成被核对的说法。

失败线全是静默

corrupt.png(72 B)与 corrupt_webp.webp(16 B)的 MIME 都合法、line 138 的 added 也已计数,但模板没有 img.onerror,于是一张不进、0 条提示。硬线在浏览器:单维 65535 px。strip-h 放 218 张是 65400×300,还能导出 7,849,564 B;219 张变 65700×300,位图根本没分配、toBlob 回调收到 null、line 379 的 createObjectURL 抛 TypeError,line 384 那句提示不会执行——用户视角就是点了下载而什么也没发生。

三个问到的点

Q:竖图为什么比横图裁得多?

方格边长只能等于短边。竖图短边是 1080,得从 1920 上下各去 sy 420,dropPct 43.75、丢 907,200 px;横图短边是 3024,只需左右各去 sx 504,dropPct 25、丢 3,048,192 px。

Q:换一种模板能少裁一点吗?

不能。7 个模板的 slotRatio 恒为 1,换模板只把边长从 300 换成 592,横图仍丢 25%、竖图仍丢 43.75%、方图仍丢 0%。摆位与形状怎么选,是九宫格与心形拼图在线做那篇的范围,两边不重叠。

Q:一次放太多张会提示吗?

不会。张数没有判定分支,格子以外的图直接被跳过;只有单维越过 65535 px 才真的失败,而那次连「拼图已下载」都不出现。

📎 相关文章

浅色底上的白字水印设成 5% 等于没加:导出 4782 字节与底图一字节不差 2026-10-28 1 月 31 日加一个月落在哪天?这页只给天数,28 天与 29 天差 86400 秒 2026-10-28 字帖每页放几个字:默认 A4 是 20 个,不是 100÷4=25 2026-10-27 同一天既是周末又被登记成补班,工作日计算器听谁的 2026-10-27 倒计时里的 86400 秒一天,碰上夏令时会少给你 1 天 2026-10-27