diff --git a/20251012/sponsor-list/background.js b/20251012/sponsor-list/background.js index a7ffd48..e1039a3 100644 --- a/20251012/sponsor-list/background.js +++ b/20251012/sponsor-list/background.js @@ -35,9 +35,12 @@ // 默认参数 const defaults = { - threshold: 8, + threshold: 30, softness: 10, - leftMargin: 0, + // leftMargin: 0, + // topOffset: -200, + // scalePercent: 125 + leftMargin: 600, topOffset: -200, scalePercent: 125, rotationDeg: 0, @@ -151,7 +154,7 @@ // 载入背景图（使用背景图做最终合成；如果你希望使用 CSS 背景而不是图片文件，可改这里） const bgImg = new Image(); - bgImg.src = "background.png"; + bgImg.src = "../assets/background.png"; bgImg.onload = () => { // 等背景加载后设置主 canvas 大小 const w = bgImg.naturalWidth || 1080; @@ -223,19 +226,38 @@ const threshold = THRESHOLD; const softness = Math.max(1, SOFTNESS); - // 基于平均亮度的简单抠像：黑色 -> 透明 + // // 基于平均亮度的简单抠像：黑色 -> 透明 + // for (let i = 0; i < len; i += 4) { + // const r = data[i], + // g = data[i + 1], + // b = data[i + 2]; + // const lum = (r + g + b) / 3; + // if (lum < threshold) { + // data[i + 3] = 0; + // } else if (lum < threshold + softness) { + // const t = (lum - threshold) / softness; + // data[i + 3] = Math.round(255 * t); + // } // else keep alpha + // } + + // 基于绿色背景的抠像（Green Screen / Chroma Key） for (let i = 0; i < len; i += 4) { - const r = data[i], - g = data[i + 1], - b = data[i + 2]; - const lum = (r + g + b) / 3; - if (lum < threshold) { - data[i + 3] = 0; - } else if (lum < threshold + softness) { - const t = (lum - threshold) / softness; + const r = data[i]; + const g = data[i + 1]; + const b = data[i + 2]; + + // “绿色程度”与“非绿色程度”的差距 + const greenDiff = g - Math.max(r, b); + + // 以 threshold / softness 控制去除强度和平滑边缘 + if (greenDiff > threshold) { + data[i + 3] = 0; // 透明 + } else if (greenDiff > threshold - softness) { + const t = (threshold - greenDiff) / softness; data[i + 3] = Math.round(255 * t); - } // else keep alpha + } // 其他保持原样 } + ctxTemp.putImageData(img, 0, 0); processed = true; } catch (err) { diff --git a/20251012/sponsor-list/index.html b/20251012/sponsor-list/index.html index 8ad6957..c3b3d03 100644 --- a/20251012/sponsor-list/index.html +++ b/20251012/sponsor-list/index.html @@ -6,23 +6,99 @@ Canvas 实时抠像（可控面板） - -
- + +
+ + + +

+ 永平赵子龙庙 +

+ + +

+ 庆祝赵子龙元帅暨众神圣诞千秋 +

+ + +

+ 庆祝赵子龙元帅暨众神圣诞千秋 +

+ + +
+

+ 血染征袍透甲红
当阳谁敢与争锋 +

+ +

+ 古来冲锋扶危主
唯有常山赵子龙 +

+ + +
+

+ 血染征袍透甲红
当阳谁敢与争锋 +

+ +

+ 古来冲锋扶危主
唯有常山赵子龙 +

diff --git a/20251012/sponsor-list/main.css b/20251012/sponsor-list/main.css new file mode 100644 index 0000000..a041a74 --- /dev/null +++ b/20251012/sponsor-list/main.css @@ -0,0 +1,3 @@ +@import "tailwindcss"; + +