ea4ccec42d
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.
174 lines
5.7 KiB
HTML
174 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Canvas 实时抠像（可控面板）</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
<style type="text/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 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
|
||
id="video"
|
||
class="hidden"
|
||
playsinline
|
||
muted
|
||
loop
|
||
autoplay
|
||
src="../assets/赵云绿幕.mp4"
|
||
></video>
|
||
|
||
<!-- Controls 面板（可关闭） -->
|
||
<div
|
||
class="absolute right-2 top-2 w-[320px] bg-white p-2 rounded-md hidden"
|
||
id="controlsPanel"
|
||
role="region"
|
||
aria-label="视频抠像控制面板"
|
||
>
|
||
<h4>
|
||
控制面板
|
||
<button class="close-btn" id="closePanel" title="关闭面板">✕</button>
|
||
</h4>
|
||
|
||
<div class="grid grid-cols-2 grid-rows-7">
|
||
<label>黑色阈值: <span id="thVal">30</span></label>
|
||
<input type="range" id="threshold" min="0" max="120" value="30" />
|
||
|
||
<label>羽化（softness）: <span id="sfVal">30</span></label>
|
||
<input type="range" id="softness" min="0" max="120" value="30" />
|
||
|
||
<label>左侧偏移 X (px): <span id="marginVal">40</span></label>
|
||
<input type="range" id="leftMargin" min="0" max="800" value="40" />
|
||
|
||
<label>顶部偏移 Y (px): <span id="topVal">0</span></label>
|
||
<input type="range" id="topOffset" min="-400" max="400" value="0" />
|
||
|
||
<label>缩放（%）: <span id="scaleVal">90</span></label>
|
||
<input type="range" id="scale" min="20" max="200" value="90" />
|
||
|
||
<label>旋转（deg）: <span id="rotVal">0</span></label>
|
||
<input type="range" id="rotation" min="-45" max="45" value="0" />
|
||
|
||
<label>不透明度: <span id="opaVal">100</span>%</label>
|
||
<input type="range" id="opacity" min="0" max="100" value="100" />
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 6px; margin-top: 8px">
|
||
<button
|
||
id="resetBtn"
|
||
class="flex-1 bg-danger rounded-md cursor-pointer"
|
||
>
|
||
重置 (R)
|
||
</button>
|
||
<button
|
||
id="applyHint"
|
||
class="flex-1 bg-warning rounded-md cursor-pointer"
|
||
>
|
||
帮助
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 当面板关闭时显示的打开按钮 -->
|
||
<button id="openBtn" class="open-controls" style="display: none">
|
||
打开控制面板
|
||
</button>
|
||
</div>
|
||
|
||
<script src="background.js"></script>
|
||
</body>
|
||
</html>
|