Tootaio/dinner.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sponsor-list): implement green screen keying and themed layout

Browse Source 
This commit overhauls the display page by replacing the luminance-based keying with a more robust chroma key (green
screen) algorithm for cleaner video cutouts.

A new visual theme has been implemented, featuring:
- Custom fonts for titles and poems.
- A main title, subtitle, and vertical poems styled with Tailwind CSS.
- Reorganization of assets into dedicated `assets` and `fonts` directories.
- Updated video source to a green screen version and adjusted canvas parameters accordingly.
This commit is contained in:
xiaomai
2025-10-12 14:00:01 +08:00
parent 02065d9c63
commit ea4ccec42d
3 changed files with 120 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
20251012/sponsor-list/index.html
View File

@@ -6,23 +6,99 @@
<title>Canvas 实时抠像（可控面板）</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";
@theme {
/* 🎨 定义自定义字体族变量 */
--font-bai-ge: "BaiGeTianXing", sans-serif;
--font-gu-huang: "ShangShouGuHuang", sans-serif;
--font-tang-ying: "YeZiTangYingHei", sans-serif;
--color-default: #4f46e5;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-danger: #ef4444;
}
@font-face {
font-family: "BaiGeTianXing";
src: url("../fonts/字魂白鸽天行体.ttf") format("truetype");
font-display: swap;
}
@font-face {
font-family: "ShangShouGuHuang";
src: url("../fonts/ShangShouGuHuangTi-2.ttf") format("truetype");
font-display: swap;
}
@font-face {
font-family: "YeZiTangYingHei";
src: url("../fonts/YeZiGongChangTangYingHei-2.ttf") format("truetype");
font-display: swap;
}
canvas#mainCanvas {
image-rendering: optimizeQuality;
}
</style>
</head>
<body class="min-h-screen flex items-center content-center">
<div class="stage" id="stage" class="relative w-full overflow-hidden">
<canvas id="mainCanvas" class="block w-full h-auto"></canvas>
<body class="min-h-screen flex items-center justify-center bg-black text-white">
<div class="stage relative w-full h-screen overflow-hidden">
<canvas id="mainCanvas" class="block w-full h-auto"></canvas>
<!-- 标题 -->
<h1 class="absolute top-4 text-center w-full font-bai-ge text-8xl text-yellow-300">
永平赵子龙庙
</h1>
<!-- 副标题描边层 -->
<h2
class="absolute top-28 w-full text-center font-bai-ge text-6xl text-transparent [-webkit-text-stroke:4px_yellow]"
>
庆祝赵子龙元帅暨众神圣诞千秋
</h2>
<!-- 副标题实色层 -->
<h2 class="absolute top-28 text-center w-full font-bai-ge text-6xl text-red-500">
庆祝赵子龙元帅暨众神圣诞千秋
</h2>
<!-- 四句诗边框容器 -->
<div
class="absolute inset-0 flex items-center justify-between px-32 pointer-events-none"
>
<p
class="font-gu-huang text-7xl leading-loose text-center text-transparent
[writing-mode:vertical-lr] [text-orientation:upright]
[-webkit-text-stroke:8px_black]"
>
血染征袍透甲红<br>当阳谁敢与争锋
</p>
<p
class="font-gu-huang text-7xl leading-loose text-center text-transparent
[writing-mode:vertical-rl] [text-orientation:upright]
[-webkit-text-stroke:8px_black]"
>
古来冲锋扶危主<br>唯有常山赵子龙
</p>
<!-- 四句诗容器 -->
<div
class="absolute inset-0 flex items-center justify-between px-32 pointer-events-none"
>
<p
class="font-gu-huang text-7xl leading-loose text-center text-white
[writing-mode:vertical-lr] [text-orientation:upright]"
>
血染征袍透甲红<br>当阳谁敢与争锋
</p>
<p
class="font-gu-huang text-7xl leading-loose text-center text-white
[writing-mode:vertical-rl] [text-orientation:upright]"
>
古来冲锋扶危主<br>唯有常山赵子龙
</p>
<!-- 来源资源：替换为你自己的文件，若跨域请加 crossorigin="anonymous" 并确保服务器允许 CORS -->
<video
@@ -32,7 +108,7 @@
muted
loop
autoplay
src="赵子龙元帅-竖屏.mp4"
src="../assets/赵云绿幕.mp4"
></video>
<!-- Controls 面板（可关闭） -->